html - 如何删除 HTML5 Canvas 上填充和填充之间的空间？

Question

我对 HTML 上一个填充和另一个填充之间的现有空间感到困扰。每个填充物都适合它们的斜面。我希望完全填满这条线，但有空间。

这是示例代码：

var canvas = document.createElement("canvas");
canvas.width = 120; canvas.height = 300;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");

ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, 120, 300);
ctx.fillStyle = "#000"; ctx.beginPath();
ctx.moveTo(0, 0); ctx.lineTo(0, 300); ctx.lineTo(120, 300); ctx.fill();
ctx.fillStyle = "#000"; ctx.beginPath();
ctx.moveTo(120, 300); ctx.lineTo(0, 0); ctx.lineTo(120, 0); ctx.fill();

您可以看到黑色三角形之间的白线（空白）。实际上，三角形的点是由Flash的自动生成程序生成的，Flash可以无空格显示三角形，而HTML5不能。有没有人有删除那条线的想法？

Answer 1

您可以通过添加以下内容为三角形添加笔触：

ctx.lineWidth = 1; ctx.strokeStyle = "#000"; ctx.closePath(); ctx.stroke();

示例：http: //jsfiddle.net/wxh4R/

// your Triangle
ctx.fillStyle = "#000"; ctx.beginPath();
ctx.moveTo(0, 0); ctx.lineTo(0, 300); ctx.lineTo(120, 300); ctx.fill();
// Stoke
ctx.lineWidth = 1; ctx.strokeStyle = "#000"; ctx.closePath(); ctx.stroke();

Answer 2

由于屏幕像素不在 0 而是在 0 和 1 之间，您可能需要在一些坐标上添加 0.5。有关更多信息，请参阅http://diveintohtml5.ep.io/canvas.html#上的“Ask Professor Markup”路径

Answer 3

将您的绘图转换为位图。