javascript - HTML Canvas 上的分层和轮廓

Question

我一直在制作一个看似简单的图形。我希望创建圆圈，用一条线连接圆圈，并用一些背景填充圆圈。我快要明白了，但这一件让我绊倒了。

我可以定义 Canvas 、创建圆圈以及连接它们的线:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = $(window).width();
canvas.height = $(window).height();

ctx.beginPath();
ctx.strokeStyle = "black";
ctx.lineWidth = 10;

//Create two nodes
ctx.arc( 100, 100, 25, 0, 2*Math.PI);
ctx.moveTo(200+25, 200)
ctx.arc( 200, 200, 25, 0, 2*Math.PI);

//line connecting two nodes
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);

ctx.stroke();

这看起来像这样:

然后我要做的就是用图像填充圆圈(这就是我使用 clip() 的原因)，但为了示例而使用白色填充也演示了该问题:

//simulate filling in nodes with image, in this case solid color
ctx.clip();
ctx.fillStyle = "white";
ctx.fill();

现在我已经快到了，但是那里有一些锯齿状边缘，我读过这只是 Chrome 中的一个小“bug”，而且我也喜欢圆圈上的粗黑色轮廓。所以，我想回顾一下仅两个圆圈并勾勒出它们的轮廓。似乎无论我做什么，上下文总是会记住连接两者的线，并且在调用 lines() 后，我最终将连接线置于图像顶部:

//would like to just re-outline circles, not connecting line
ctx.stokeStyle = "black";
ctx.arc( 100, 100, 25, 0, 2*Math.PI);
ctx.moveTo(200+25, 200)
ctx.arc( 200, 200, 25, 0, 2*Math.PI);
ctx.stroke();

我不明白的是如何在填充白色背景(加载图像)后再次勾勒出两个圆圈的轮廓？

我认为它就像分层绘图。首先，我画一些线条，然后放入图像，然后在上面再次绘制。不确定 html canvas 是否应该这样使用。谢谢。

JSFiddle Example Here

Answer 1

你忘记了开始一条新的道路。

每当你开始一个新的形状时，你必须使用ctx.beginPath，否则上下文将重新绘制所有以前的路径。

顺便说一句，锯齿状圆圈是因为您正在重新渲染它们，这会导致边缘出现锯齿状。

var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);
ctx.setTransform(1,0,0,1,0,-50); // just moving everything up to be seen in snippet.

ctx.beginPath();
ctx.strokeStyle = "black";
ctx.fillStyle = "#FAFAFF";
ctx.lineWidth = 10;

//Create two nodes
/*   dont draw the two circle the first time as you are
     doubling the render causing the edges to get to sharp
     making them appear jaggy.
ctx.arc( 100, 100, 25, 0, 2*Math.PI);
ctx.moveTo(200+25, 200)
ctx.arc( 200, 200, 25, 0, 2*Math.PI);
*/
//line connecting two nodes
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);

ctx.stroke();

ctx.beginPath();  // start a new path and removes all the previous paths

//Create two nodes
ctx.arc( 100, 100, 25, 0, 2*Math.PI);
ctx.moveTo(200+25, 200)
ctx.arc( 200, 200, 25, 0, 2*Math.PI);
ctx.fill();

ctx.beginPath();  // start a new path and removes all the previous paths

//Create two nodes
ctx.arc( 100, 100, 25, 0, 2*Math.PI);
ctx.moveTo(200+25, 200)
ctx.arc( 200, 200, 25, 0, 2*Math.PI);
ctx.stroke();