如何删除填充和填充HTML5画布之间的空间？

我很担心在一个填充和另一个填充HTML之间的现有空间。每个填充物都适合他们的倾斜面。我期待填写完整的行，但有空间。如何删除填充和填充HTML5画布之间的空间？

这是示例代码：

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的自动生成程序，和闪光可以显示三角形没有空间，但HTML5不能。有没有人有一个想法，擦除该行？

来源

2011-07-26 tkihira

您可能需要加0.5到一些离你的坐标，因为屏幕像素是不为0，但0和1。有关详细信息，请参阅之间的“问教授标记”在http://diveintohtml5.ep.io/canvas.html#paths

来源

2011-07-26 11:04:01 Rickard

我想知道我必须添加哪一方。形状的点是自动生成的，所以很难确定我应该添加0.5或者0.5, – tkihira

您可以添加描边三角形通过添加这样的：

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

来源

2011-07-26 11:24:51 Floern

它看起来非常好，但也有一些不好的情况。例如，fillStyle正在使用渐变填充或位图填充。有任何想法吗？ – tkihira

对于这种情况，您可以绘制对象三次：一个在原始位置，一个在x方向上偏移〜0.8px，一个在y方向上偏移〜0.8px ... – Floern

想象fillStyle是否具有alpha值，但我认为你的想法非常好！ – tkihira

转换您附图成位图。

来源

2017-09-23 08:02:33 Aaron

嗨，欢迎来到stackoverflow。如果有的话，如果你添加一些示例代码和/或有用的链接，你的答案会更有帮助。 [阅读本文]（https://stackoverflow.com/help/how-to-answer）。 – kamyl

这不提供问题的答案。一旦你有足够的[声誉]（https://stackoverflow.com/help/whats-reputation），你将可以[对任何帖子发表评论]（https://stackoverflow.com/help/privileges/comment）;相反，[提供不需要提问者澄清的答案]（https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can- I-DO-代替）。 - [来自评论]（/ review/low-quality-posts/17422027） – FluffyKitten

如何删除填充和填充HTML5画布之间的空间？

回答

相关问题