HTML画布上的分层和大纲

Question

我一直在研究一个看似简单的图形。我希望创建一个圆圈，用一条连接圆圈的线条，并用一些背景填充圆圈。我几乎得到了它，但这一件让我绊倒了。

我可以定义画布，创建圆圈和连接它们的线条：

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中的一个小“虫子”，我也喜欢圈子上那个粗黑的轮廓。所以，我想回到只是2个圈子并勾画它们。似乎无论我做什么，上下文总会记住连接两者的线，并且在调用stroke()之后我最终得到了图像顶部的连接线：

//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();

我无法弄清楚如何在填充白色背景（加载图像）后再次勾勒出2个圆圈？

我认为它就像分层画画一样。首先我绘制一些线条，然后我将图像放入，然后我再次绘制在顶部。不确定html画布是否意味着像这样使用。感谢。

JSFiddle Example Here

Answer 1

你忘了开始一条新路。

无论何时开始新形状，都必须使用ctx.beginPath，否则上下文将重绘以前的所有路径。

BTW the jaggy circles是因为你正在重新渲染它们，这会导致边缘变得锯齿状。

＆＃13;

＆＃13;

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();

＆＃13;

＆＃13;

＆＃13;