Все HTML-формы холста имеют цвет последнего добавленного объекта.

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-му.

Как мне сделать это различие? Я думал о том, чтобы заставить каждого из них вызывать действие. Я ошибаюсь с самого начала?

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/