Question

大家好我试图用半圆画在画布上画一条简单的彩虹。我创建的第一个圆圈完美无缺。

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

<script> 
var omkadering = document.getElementById("myCanvas");
var context = omkadering.getContext("2d");

context.beginPath();`
context.arc(95,100,80,3.1,2*Math.PI);
context.lineWidth = 10;
context.strokeStyle = "violet";
context.stroke();

</script>
</body>
</html>

这实际上工作得很好我完成了第一层 first layer

然后我尝试制作第二部分，所以我添加了这部分

context.strokeStyle = "violet";
-- started new code here --
context.closePath();
context.beginPath();
context.arc(95,120,80,3.1,2*Math.PI);
context.strokeStyle = "indigo";
-- new code ends here --
context.stroke();

</script>
</body>
</html>

但它会覆盖旧图层

layer 2 result

我也尝试了其他几种方法，例如创建一个新的变量上下文或将它们彼此分开但没有帮助

有没有人知道我做错了什么或忘了添加？

提前谢谢！

Ian Dessers

Answer 1

你应该改变弧的半径，而不是中心。

var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

var arcWidth = 10;
var radius = 8 * arcWidth;

var omkadering = document.getElementById("myCanvas");
var context = omkadering.getContext("2d");
omkadering.width = (radius + (colors.length-0.5) * arcWidth) * 2;
omkadering.height = (radius + (colors.length-1) * arcWidth);

var drawArc = function( color ){
  context.beginPath();
  context.arc(
    omkadering.width/2,
    omkadering.height + arcWidth/2,
    radius,
    Math.PI,
    2*Math.PI
  );
  context.lineWidth = arcWidth;
  context.strokeStyle = color;
  context.stroke();
  context.closePath();
  radius += arcWidth;
};

colors.reverse().forEach( drawArc );

<canvas id="myCanvas" style="border:1px solid #000000;"></canvas>

Answer 2

您还可以使用径向渐变创建彩虹：

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var cx=cw/2;
var cy=ch/2;

draw();

function draw() {
  var gradient = ctx.createRadialGradient(cx,ch,50,cx,ch,100);
  var stop=1/8;
  gradient.addColorStop(stop*0, 'transparent');
  gradient.addColorStop(stop*7, 'red');
  gradient.addColorStop(stop*6, 'orange');
  gradient.addColorStop(stop*5, 'yellow');
  gradient.addColorStop(stop*4, 'green')
  gradient.addColorStop(stop*3, 'blue');
  gradient.addColorStop(stop*2, 'Indigo');
  gradient.addColorStop(stop*1, 'violet');
  gradient.addColorStop(stop*8, 'transparent');
  ctx.fillStyle = gradient;
  ctx.fillRect(0,0,cw,ch);
  ctx.fill();
}

＆＃13;

body{ background-color:white; }
#canvas{border:1px solid red;}

＆＃13;

<canvas id="canvas" width=300 height=125></canvas>

＆＃13;

Answer 3

使用HSL颜色循环绘制一个（红色应该在外面）：

在最大条数上标准化当前条形给出一个可用于Hue组件的值（300-360°，降低上角以减小条带）。然后简单地减少每个条形的半径，使用-1的粗细以保持较小的重叠，以覆盖前一个条形的抗锯齿。

通过设置更高的最大条并减小线宽（或根据总半径范围计算线宽）可以增加平滑度。

实施例

snapshot

var ctx = c.getContext("2d"), bars = 20, i = 0, radius = 140;
ctx.lineWidth = 3;

for(i = 0; i < bars; i++, radius -= ctx.lineWidth - 1) {      // increase bar, reduce radius
  ctx.beginPath();
  ctx.arc(c.width * 0.5, c.height, radius, 0, Math.PI, true); // half circle
  ctx.strokeStyle = "hsl(" + (i / bars * 300) + ",90%,50%)";  // set color using HSL
  ctx.stroke();
}

<canvas id=c></canvas>

用画布和javascript绘制彩虹

3 个答案:

实施例