CSS div样式，javascript画布颜色更改
[英]CSS div style, javascript canvas color change
问题描述
I am having an issue trying to get these 3 divs to line up on the same horizontal pane. 
我在尝试使这3个div在同一水平窗格上对齐时遇到问题。
I will also like to know if it is possible to have the color of my circle change based on a value of a variable. 我还想知道是否可以根据变量的值更改圆圈的颜色。 I would greatly appreciate an example function. 我将不胜感激示例功能。
<html>
<body>
<style type="text/css">
.circle
{
width:115px;
height:115px;
border-radius:250px;
font-size:20px;
color:#fff;
line-height:115px;
text-align:center;
background:#000
}
</style>
<div id="container" style=" border: 2px coral solid; width:100%; height:120px;">
<div class="circle">Hello</div>
<div id="leadInfo" style="width:37%; height:115px; float:left; background-color:yellow;"> </div>
<div id="leadInfo2" style="width:37.5%; height:115px; float:right; background-color:blue;"> </div>
</div>
</body>
</html>
3 个解决方案
解决方案1
0 2014-06-04 03:11:01
First you wrote 首先你写
float: leftt;
Instead of 代替
float: left;
Also, try adjusting one of the yellow circles to be less then 37.5%, it somehow goes over 100% in total and jumps down. 另外，尝试将黄色圆圈之一调整为小于37.5％，总的来说，它会超过100％并下降。 So 37% will be enough. 因此37％就足够了。
解决方案2
0 2014-06-04 03:20:04
<div id="container" style=" border: 3px coral solid; width:100%; height:auto;">
<div id="colorwheel" style="width:25%; float:left; border: 3px coral solid;">
<canvas id="circlecanvas" width="100" height="100"></canvas>
<script>
var canvas = document.getElementById("circlecanvas");
var context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fillStyle="red";
context.fill()
</script>
</div>
<div id="leadInfo" style="width:37.2%; height:108px; float:right; background-color:yellow;border:1px solid red;"> </div>
<div id="leadInfo" style="width:37.2%; height:108px; float:right; background-color:yellow;border:1px solid red;"> </div>
<div style="clear:both"></div>
</div>
解决方案3
0 2014-06-04 05:55:49
And about changing the color of a circle on canvas... 关于更改画布上圆圈的颜色...
No, you can't change anything you've drawn on the canvas (including your circle). 不，您不能更改在画布上绘制的任何内容（包括圈子）。
That's because canvas doesn't "remember" where it drew your circle. 那是因为画布不会“记住”它绘制圆圈的位置。 Your circle becomes an un-remembered group of pixels on the canvas. 您的圈子变成了画布上一个未被记忆的像素组。
Therefore, if you want to change anything on the canvas, you must erase the canvas and redraw your circle using the fillStyle in your variable. 因此，如果要更改画布上的任何内容，则必须擦除画布并使用变量中的fillStyle重绘圆。
// create a variable to hold your desired fill color
var myFillColor="gold";
// clear the canvas
context.clearRect(0,0,canvas.width,canvas.height);
// set the context.fillStyle to your variable
context.fillStyle=myFillColor;
// redraw your circle
context.beginPath();
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fill();
Important note: context.arc is a path command and every group of path commands must be preceeded by context.beginPath. 重要说明：context.arc是路径命令，每组路径命令必须以context.beginPath开头。 beginPath tells the browser you are finished drawing the previous path and are now drawing a new path. beginPath告诉浏览器您已经完成了上一个路径的绘制，现在正在绘制一个新的路径。 Failing to start new paths with beginPath will cause your next context.fill (or context.stroke) command to redraw all previous path commands. 无法使用beginPath启动新路径将导致您的下一个context.fill（或context.stroke）命令重新绘制所有先前的路径命令。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.