用画布和 JavaScript 绘制彩虹答案

【问题标题】：drawing a rainbow with canvas and javascript用画布和 JavaScript 绘制彩虹
【发布时间】：2016-06-08 11:07:24
【问题描述】：

大家好，我想用半圆在画布上画一条简单的彩虹。我的第一个圈子被完美地创建了。

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

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

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

提前致谢！

伊恩·德瑟斯

【问题讨论】：

标签： javascript jquery css canvas drawing

【解决方案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 );

&lt;canvas id="myCanvas" style="border:1px solid #000000;"&gt;&lt;/canvas&gt;

【讨论】：

【解决方案2】：

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

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

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

示例

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();
}

&lt;canvas id=c&gt;&lt;/canvas&gt;

【讨论】：

【解决方案3】：

您还可以创建带有径向渐变的彩虹：

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();
}

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

&lt;canvas id="canvas" width=300 height=125&gt;&lt;/canvas&gt;

【讨论】：

看起来不错！ :) 谢谢你的回复！
我认为只有双彩虹才能以这种方式获得颜色，所以要么你搞错了，要么你忘记了主彩虹;-)
@Kaiido 实际上，我只知道从红外线到紫外线的色谱范围，我承认我不知道彩虹是如何着色的。 :-O 所以我把它弄反了？？
好吧，我不是专家，但根据我对en.wikipedia.org/wiki/Rainbow 的快速阅读，光谱是向后的，因为我们看到它在雨滴中的反射，除了更罕见的双彩虹情况，其中主彩虹本身被反射（因此光谱向前）
@Kaiido，够了......因为我无法改变大自然（！），我将在我的演示中反转颜色。 :-)