javascript - Canvas 颜色相互覆盖

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>