Question

我在画布上掏出一个形状，但我无法填写它为什么：v 我想用矩形内的任何颜色填充。

HTML：<canvas id="canvas" width="1000px" height="1000px"></canvas>

var ctx = document.getElementById("canvas").getContext("2d");
var size = 200;

ctx.rect(500, 50, 200, 200);
ctx.stroke();

ctx.lineWidth = 2
ctx.strokeStyle = "red";
ctx.fillStyle = "red";
ctx.beginPath();
ctx.moveTo(530, 100);
ctx.lineTo(550, 140);

ctx.moveTo(550, 140);
ctx.lineTo(570, 100);

ctx.moveTo(570, 100);
ctx.lineTo(550, 120);

ctx.moveTo(530, 100);
ctx.lineTo(550, 120);

ctx.closePath();
ctx.fill();
ctx.stroke();

Answer 1

这是因为您多次使用moveTo()方法，这会破坏对前一行的引用。

另外，在绘制矩形之前，您应该使用beginPath()方法。

var ctx = document.getElementById("canvas").getContext("2d");
var size = 200;

ctx.beginPath();
ctx.rect(500, 50, 200, 200);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(530, 100);
ctx.lineTo(550, 140);
ctx.lineTo(570, 100);
ctx.lineTo(550, 120);
ctx.closePath();

ctx.lineWidth = 2
ctx.fillStyle = "red";
ctx.fill();

<canvas id="canvas" width="1000" height="1000"></canvas>

使用MoveTo和LineTo的Canvas Fillstyle

1 个答案: