html - 所有 html Canvas 形状都被赋予最后添加的对象的颜色

Question

我试图做一个奥林匹克类型的旗帜，纯粹是为了学习如何在 JavaScript 中绘制。这应该绘制两个圆圈 - 一个蓝色，一个黑色...... 这是代码(我对此表示歉意，一直在两个函数之间移动东西——不确定如何非明确地引用上下文):

function drawCircle(ctx,x,y,radius, color){
  var startAngle = 0;
  var endAngle = (Math.PI*2);
  var clockwise = true;
  ctx.fillStyle = color;
  ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
  ctx.fill();
  ctx.closePath;
}
function drawCircles(){
    var canvas = document.getElementById('myCanvasArea');  
    var ctx = canvas.getContext('2d'); 
     if (canvas.getContext){    
        drawCircle(ctx,50,25,25, 'blue');
        drawCircle(ctx,100,25,25, 'black');
    }
}

我有两个黑色圆圈。我想我没有区分这两种形状，因此第 2 个的属性适用于第 1 个。

我该如何区分？我正在考虑让点击每一个都引发一个 Action 。我是否从一开始就错误地处理了这个问题？

Answer 1

这是因为您从未调用过 beginPath()!

function drawCircle(ctx,x,y,radius, color){
  var startAngle = 0;
  var endAngle = (Math.PI*2);
  var clockwise = true;
  ctx.fillStyle = color;
  ctx.beginPath(); // <-- Need me!!
  ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
  ctx.fill();
  ctx.closePath;
}

因为您没有调用 beginPath，所以您正在绘制一个蓝色圆圈，然后您继续一条现在有两个圆圈(旧圆圈和新圆圈)的路径，然后绘制该路径(因此两个圆圈)都是黑色的!

相反，您想绘制一个蓝色圆圈，将其填充为蓝色，开始一条新路径，然后将那个圆圈绘制为黑色。

实时代码:

http://jsfiddle.net/5PDUb/1/