javascript - 在HTML 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”，而且我也喜欢圆圈上的黑色粗轮廓。因此，我只想回顾两个圆圈并概述它们。似乎不管我做什么，上下文始终记住连接这两者的那条线，在调用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();

我不知道的是如何在填充白色背景（加载图像）后再次勾勒出两个圆圈？

我认为它就像分层绘制。首先，我画一些线，然后放入图像，然后再画在顶部。不知道html canvas是否打算那样使用。谢谢。

JSFiddle Example Here

最佳答案

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

每当开始新形状时，都必须使用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();