javascript - 用 canvas 和 javascript 绘制彩虹-6ren

javascript - 用 canvas 和 javascript 绘制彩虹

转载作者：太空宇宙更新时间：2023-11-03 20:33:12

26

4

大家好，我正在尝试使用半圆在 Canvas 上绘制一条简单的彩虹。我的第一个圈子创建成功了。

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

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

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

提前致谢!

伊恩·德塞斯

最佳答案

您应该更改圆弧的半径，而不是圆心。

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>

关于javascript - 用 canvas 和 javascript 绘制彩虹，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37700784/

26

4

0

文章推荐： html - 媒体查询不适用于 768px ipad 肖像

文章推荐： c# Visual Studio 似乎遵循了错误的代码路径

文章推荐： javascript - 单击任何内容元素时将焦点设置到 div

使用渐变颜色构建的 css 彩虹
我有以下问题:写一个网页，上面有一个使用渐变颜色构建的彩虹。彩虹应倾斜一定 Angular (不应完全水平)，左侧彩虹的宽度应小于右侧彩虹的宽度。我不知道如何做宽度的部分。谁能帮帮我？ #grad1
html - CSS设计-彩虹
我只想使用 CSS 来创建彩虹。以下是所需内容的图片。这是我的代码(到目前为止): * { margin: 0; padding: 0; } #r { height: 80vw; w
苹果推出两款 Apple Watch“彩虹”表带
伴随每年 LGBT 骄傲月的到来，各大品牌都会纷纷站出来为他们推出 “Pride” 系列产品，以此表示支持。 IT之家昨日报道，苹果watchOS 6.2.5 Beta5新增4款彩虹表盘。而就
html - 使用渐变颜色和多个 div 构建的 css 彩虹
与这个问题相关 css rainbow built using gradient colors 有没有办法通过使用多个 div 而不是一个来做到这一点？您可能会问，为什么只用一个就可以做到这一点，出
ruby 彩虹/ unicorn 开始 faye and rails
有没有一种方法可以在 rainbows/unicorn 中同时启动 faye 和 rails 应用程序。现在我正在使用 rainbows 启动 faye/private_pub 应用程序，但也想用它
python - 如何使用 matplotlib 绘制 2D 梯度(彩虹)？
我尝试使用 matplotlib 库绘制梁的应力。我已经使用公式计算并绘制了它作为示例: 如图 1 所示，您会看到绿色光束在元素 3 和元素 8 处具有更大的应力，因此如果我用彩虹渐变填充颜色，蓝色

首页

博学

6Ren·AI

商城

javascript - 用 canvas 和 javascript 绘制彩虹