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

我得到两个黑圈。我认为我没有区分这两种形状，因此第二种的属性应用于第一种。

我如何区分？我想点击每个人提出一个动作。我从一开始就错了吗？

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/

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

1 个答案: