用画布和JavaScript绘制彩虹
[英]drawing a rainbow with canvas and javascript
问题描述
Hello everyone I am trying to draw a simple rainbow in canvas by using half circles. 
大家好，我正在尝试使用半圈在画布上绘制一条简单的彩虹。 My first circle was created an worked perfectly. 我的第一个圈子非常完美。
<!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>
this actually worked fine I had the first layer done first layer 这实际上很好，我已经将第一层完成了第一层
then I tried to make the second one so I added this part 然后我尝试制作第二个，所以我添加了这一部分
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>
but it overwrites the old layer 但它会覆盖旧层
I tried several other methods too, like making a new variable context or separating them from each other but none helped 我也尝试了其他几种方法，例如创建一个新的变量上下文或将它们彼此分离，但是没有一种帮助
does anyone had an idea what I do wrong or forgot to add ? 有谁知道我做错了什么或者忘记添加了什么？
thanks in advance ! 提前致谢 ！
Ian Dessers 伊恩·德瑟斯（Ian Dessers）
3 个解决方案
解决方案1
3 已采纳 2016-06-08 12:53:59
You are supposed to change the radius of the arc, not the centre. 您应该更改圆弧的半径，而不是中心。
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>
解决方案2
1 2016-06-08 17:07:04
You can also create a rainbow with a radial gradient: 您还可以创建带有径向渐变的彩虹：
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;}
<canvas id="canvas" width=300 height=125></canvas>
解决方案3
1
Draw one using HSL color cycle-through (red should be on the outside): 使用HSL颜色循环绘制一个（红色应该在外面）：
Normalizing current bar on max number of bars gives a value that can be used for the Hue component (300-360°, lower the upper angle to reduce the bands). 在最大条数上对当前条进行归一化，可以得到一个可用于色相分量的值（300-360°，降低上角以减小色带）。 Then simply decrease radius for each bar with the thickness of the line -1 to keep a small overlap to cover anti-aliasing from the previous bar. 然后，以线-1的粗细简单地减小每个条的半径，以保持小的重叠以覆盖前一条的抗锯齿。
The smoothness can be increased by setting higher max bars and reduce the line-width (or calculate the line-width based on total radius range). 可以通过设置更高的最大钢筋和减小线宽（或根据总半径范围计算线宽）来增加平滑度。
Example 例
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.