在路径中绘制不同颜色的形状（HTML5 Canvas / Javascript） [英] Drawing different colored shapes in a path (HTML5 Canvas / Javascript)

问题描述

我尝试绘制不同颜色填充的多个圆弧

  // -------- ------ draw 
 ctx.beginPath（）; 
 ctx.fillStyle =black; 
 ctx.arc（30，30，20，0，Math.PI * 2，true）; 
 ctx.fill（）; 
 ctx.fillStyle =red; 
 ctx.arc（100，100，40，0，Math.PI * 2，true）; 
 ctx.fill（）; 
 ctx.closePath（）; 
  

这会产生两个用红色填充的圆弧，我可以看出，

任何人都可以了解我如何做到这一点？我做错了什么？

解决方案

关闭路径，然后重新打开。

  ctx.closePath（）; 
 ctx.beginPath（）; 
  

jsFiddle 。

=https://i.stack.imgur.com/O7fUa.pngalt =圈子>

I'm trying to draw multiple circle arcs filled with different colors

        //-------------- draw
        ctx.beginPath();
        ctx.fillStyle = "black";
        ctx.arc(30, 30, 20, 0, Math.PI*2, true);
        ctx.fill();
        ctx.fillStyle = "red";
        ctx.arc(100, 100, 40, 0, Math.PI*2, true);
        ctx.fill();
        ctx.closePath();

This produces both arcs filled in with red, and I can tell that there is a faint black outline around the smaller one.

Can anyone shed some light on how I can accomplish this? what I'm doing wrong?

解决方案

Close the path and then reopen it.

ctx.closePath();
ctx.beginPath();

jsFiddle.

...between the arc drawing code.

这篇关于在路径中绘制不同颜色的形状（HTML5 Canvas / Javascript）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！