javascript - Canvas 颜色相互覆盖

需要为项目绘制不同的颜色对象，即使我关闭路径和开始路径，笔触样式仍会相互覆盖。在浏览器中打开时，我的圆圈变成绿色而不是黄色，并且我所有的行变成红色而不是应该使用的颜色

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;

最佳答案

您的代码中有各种问题：


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>

关于javascript - Canvas 颜色相互覆盖，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30676688/