我对 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 不能。 有没有人有删除那条线的想法?
最佳答案
您可以通过添加以下内容来为三角形添加笔画:
ctx.lineWidth = 1; ctx.strokeStyle = "#000"; ctx.closePath(); ctx.stroke();
// 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();
关于html - 如何去除 HTML5 Canvas 上 fill 和 fill 之间的空格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6828198/