画布颜色会互相覆盖

Question

需要为项目绘制不同的颜色对象，即使我正在关闭路径和开始路径，但描述仍会覆盖彼此。在浏览器中打开时，我的圆圈变为绿色而不是黄色，我的所有线条都变成红色，而不是它们应该是的颜色

function init(){
var drawBtn, clearBtn;

drawBtn = document.getElementById('drawBtn');
drawBtn.onclick = draw;

clearBtn = document.getElementById('clearBtn');
clearBtn.onclick = clearCanvas

clearCanvas();
}

function drawCircle(circle, ctx){
ctx.fillstyle = circle.color;

ctx.beginPath();

ctx.arc(circle.centerX, circle.centerY, circle.radius, 0, 2 * Math.PI);
ctx.fill();

ctx.strokeStyle = 'Black'
ctx.lineWidth = 1;
ctx.stroke();

ctx.closePath();
}

function draw(){
var canvas =
    document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

var top = 80;
var left = 130;
var high = 200;
var wide = 300;

var top2 = 50;
var left2 = 90;
var high2 = 160;
var wide2 = 260;

var cirleft = 250;
var cirtop = 120;
var myRadius1 = 110;

ctx.beginPath;
ctx.strokeStyle = 'Blue';
ctx.moveTo(30,50);
ctx.lineTo(120,150);
ctx.stroke();
ctx.closePath;

ctx.beginPath;
ctx.strokeStyle = 'Green';
ctx.moveTo(100,50);
ctx.lineTo(170,125);
ctx.stroke();
ctx.closePath;

ctx.beginPath;
ctx.strokeStyle = 'Red';
ctx.moveTo(80,95);
ctx.lineTo(30,75);
ctx.stroke();
ctx.closePath;

ctx.beginPath;
ctx.fillStyle = 'Blue';
ctx.fillRect(left, top, wide, high);
ctx.fill();
ctx.closePath;

ctx.beginPath;
ctx.fillStyle = 'Green';
ctx.fillRect(left2, top2, wide2, high2);
ctx.fill();
ctx.closePath;

var myColor1 = 'Yellow';

var myCircle1 = {
    centerX: cirleft,
    centerY: cirtop,
    radius: myRadius1,
    fillStyle: myColor1
}
drawCircle(myCircle1, ctx)
}

function clearCanvas(){
var canvas, ctx;
canvas = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');

ctx.clearRect(0,0, canvas.width, canvas.height);
}

window.onload = init;

Answer 1

您的代码中存在各种问题：

• beginPath是一个函数，因此必须使用beginPath()
执行
• closePath并不像beginPath的结束那样。 closePath实际上只是从当前绘图位置返回到起始绘图位置的直线。发布新的beginPath时，beginPath实际上已“关闭”。
• fillRect不是路径命令，所以在调用fillRect之前不需要beginPath。
• 错字：ctx.fillStyle = circle.fillStyle;不是ctx.fillstyle

以下是重构的代码：

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

init();

function init(){
  var drawBtn, clearBtn;

  drawBtn = document.getElementById('drawBtn');
  drawBtn.onclick = draw;

  clearBtn = document.getElementById('clearBtn');
  clearBtn.onclick = clearCanvas

  clearCanvas();
}

function drawCircle(circle, ctx){

  ctx.beginPath();
  ctx.arc(circle.centerX, circle.centerY, circle.radius, 0, 2 * Math.PI);
  ctx.closePath();

  ctx.fillStyle = circle.fillStyle;
  ctx.fill();
  ctx.strokeStyle = 'Black'
  ctx.lineWidth = 1;
  ctx.stroke();

}

function draw(){

  var top = 80;
  var left = 130;
  var high = 200;
  var wide = 300;

  var top2 = 50;
  var left2 = 90;
  var high2 = 160;
  var wide2 = 260;

  var cirleft = 250;
  var cirtop = 120;
  var myRadius1 = 110;

  ctx.beginPath();
  ctx.strokeStyle = 'Blue';
  ctx.moveTo(30,50);
  ctx.lineTo(120,150);
  ctx.stroke();

  ctx.beginPath();
  ctx.strokeStyle = 'Green';
  ctx.moveTo(100,50);
  ctx.lineTo(170,125);
  ctx.stroke();

  ctx.beginPath();
  ctx.strokeStyle = 'Red';
  ctx.moveTo(80,95);
  ctx.lineTo(30,75);
  ctx.stroke();

  ctx.fillStyle = 'Blue';
  ctx.fillRect(left, top, wide, high);
  ctx.fill();

  ctx.fillStyle = 'Green';
  ctx.fillRect(left2, top2, wide2, high2);

  var myColor1 = 'Yellow';

  var myCircle1 = {
    centerX: cirleft,
    centerY: cirtop,
    radius: myRadius1,
    fillStyle: myColor1
  }
  drawCircle(myCircle1, ctx)
}

function clearCanvas(){
  ctx.clearRect(0,0, canvas.width, canvas.height);
}

<button id=drawBtn>Draw</button>
<button id=clearBtn>Clear</button>
<br>
<canvas id="mycanvas" width=450 height=300></canvas>