Question

我遇到了一个问题，试图让这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>

Answer 1

首先你写了

float: leftt;

而不是

float: left;

另外，尝试将其中一个黄色圆圈调整为小于37.5％，它总计超过100％并跳跃下来。所以37％就足够了。

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

Answer 3

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

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

那是因为画布没有记得＆＃34;它画了你的圈子。你的圆圈成为画布上不记得的一组像素。

因此，如果要更改画布上的任何内容，则必须使用变量中的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）命令重绘以前的所有路径命令。

CSS div风格，javascript画布颜色变化

3 个答案: