使 canvas 填充在形状中包含描边

Make canvas fill include stroke in shapes

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

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

渲染代码只有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();

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

在三角形的边缘各处都有丑陋的线条(当我重新添加笔划时,这些线条被删除了)

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

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

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

所以我的问题如下有没有办法让上下文填充包含笔划区域而不用笔触,因为它非常昂贵?

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

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

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

说左边的结果就是你所得到的(这里模拟的),差距明显。如右图在顶部重新绘制它可以覆盖间隙而不会有太多失真。

只需使用:

ctx.drawImage(sourceCanvas, 1, 1);

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

注意:绘制到自身会导致内部分配临时位图副本。但是,您只需要执行一项额外的 drawImage() 操作。选项是使用 off-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>