javascript - 使 Canvas 填充包括形状中的描边

Question

好的，所以我正在用纯 javascript 制作 3D 渲染引擎，这当然是一个挑战 - 以测试我的线性代数技能。我没有使用 webgl，所以请不要说“使用 webgl”。

无论如何，软件 将接受三 Angular 形、相机和局部变换，并将数据渲染到屏幕上(我什至让它具有交互性)

不过渲染代码只有6行，分别是:

// some shading and math calculations then this:
context.fillStyle = color;
context.strokeStyle = color;
context.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x0, y0);
context.closePath();
context.fill();
context.stroke();

虽然这可行，但在我的 Chromebook 上显示 4k+ 人脸时它会下降到 10fps。 (在普通计算机上为 60fps)

无论如何，输出是这样的:

但为了让它更快，并且因为 Canvas 状态变化很慢，我删除了描边，使渲染代码:

// some shading and math calculations then this:
context.fillStyle = color;
//context.strokeStyle = color;
context.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x0, y0);
context.closePath();
context.fill();
//context.stroke();

它的运行速度是原来的两倍，但是渲染到屏幕上的结果是这样的:(不同的型号)

在三 Angular 形的边缘到处都有丑陋的线条(当我重新添加笔画时它们被删除了)

但是，fps 翻倍和性能提升非常好......

所以我认为这些线条是由于 Canvas 填充不包括它本应描边的区域(如您所说的轮廓)引起的。

我尝试用数学来解决它，虽然它可以工作，但在某些边缘情况下它不会

所以我的问题如下:有没有一种方法可以让上下文填充包含笔划区域而不用笔划，因为它非常昂贵？

Answer 1

同时使用描边和填充将强制光栅化两次，这解释了大约两倍的时间。

三 Angular 形之间出现毛刺的原因是舍入误差和抗锯齿。对此没有直接的解决方案；笔划当然会覆盖毛刺，但是如果没有笔划就需要您至少偏移和扩展每个其他三 Angular 形。

但是，您可以使用一个小技巧来弥补差距，那就是在顶部重绘整个图像(作为位图)，仅偏移一个像素(您可能会逃脱 0.5 像素，但随后需要抗锯齿).这会增加时间，但远少于路径的光栅化或重新计算。

假设左边的结果是你(这里模拟的)有明显差距的结果。如右图所示在顶部重新绘制它会覆盖间隙而不会造成太多失真。

只需使用:

ctx.drawImage(sourceCanvas, 1, 1);

提示:当只调用fill()时，不需要closePath()，因为它是隐式调用，省了一个op。微观增益可能但仍然存在(对于更复杂的几何形状，它甚至可能会产生影响:))。

注意:绘制到自身会导致内部分配一个临时位图副本。但是，您只需执行一项额外的 drawImage() 操作。该选项是使用 Canvas 外渲染，但在主显示 Canvas 上绘制两次。无论哪种方式...

var ctx = c.getContext("2d");

ctx.fillStyle = "#777";
tri(10,10, 72,17, 40.2, 100);

// simulates gap
ctx.fillStyle = "#222";
tri(72.5,17.5, 40.7,100.5, 90,25);

// fill entire image back again, drawn twice here for demo
ctx.drawImage(c, 100, 0);
ctx.drawImage(c, 0, 0, 100, 150, 101, 1, 100, 150);

ctx.fillText("Raster", 5, 8);
ctx.fillText("Offset self", 105, 8);

function tri(x0,y0,x1,y1,x2,y2) {
  ctx.beginPath();
  ctx.moveTo(x0, y0);
  ctx.lineTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.fill();
}

<canvas id=c></canvas>