如何删除填充和填充HTML5 Canvas之间的空间?

时间:2011-07-26 09:48:27

标签: html5 canvas html5-canvas

我被一个填充和另一个填充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不能。 有没有人有想法擦除那条线?

3 个答案:

答案 0 :(得分:3)

您可以通过添加以下内容为三角形添加笔划:

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

答案 1 :(得分:1)

由于屏幕像素不是0而是介于0和1之间,因此您可能需要在某些偏离坐标上添加0.5。有关详细信息,请参阅http://diveintohtml5.ep.io/canvas.html#paths上的“Ask Professor Markup”

答案 2 :(得分:0)

将图形转换为位图。