CSS div 样式，javascript 画布颜色变化答案

【问题标题】：CSS div style, javascript canvas color changeCSS div 样式，javascript 画布颜色变化
【发布时间】：2014-06-04 21:27:07
【问题描述】：

我在尝试让这 3 个 div 排列在同一个水平窗格上时遇到问题。

我还想知道是否可以根据变量的值改变我的圆的颜色。我将不胜感激一个示例函数。

  <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>

【问题讨论】：

好吧，你拼错了“left”

标签： javascript html css html5-canvas

【解决方案1】：

首先是你写的

float: leftt;

代替

float: left;

另外，尝试将其中一个黄色圆圈调整为小于 37.5%，它以某种方式超过 100% 并跳下。所以 37% 就足够了。

【讨论】：

【解决方案2】：

<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】：

关于改变画布上圆圈的颜色...

不，您无法更改在画布上绘制的任何内容（包括您的圆圈）。

那是因为画布不“记住”它在哪里画了你的圆圈。你的圆圈变成了画布上一组未被记住的像素。

因此，如果要更改画布上的任何内容，则必须擦除画布并使用变量中的 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();

重要提示：context.arc 是一个路径命令，每组路径命令必须以 context.beginPath 开头。 beginPath 告诉浏览器您已完成先前路径的绘制，现在正在绘制新路径。未能使用 beginPath 启动新路径将导致您的下一个 context.fill（或 context.stroke）命令重绘所有先前的路径命令。

【讨论】：