Как убрать пробел между заливкой и заливкой на 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,5 к некоторым вашим координатам, поскольку пиксель экрана находится не в 0, а в диапазоне от 0 до 1. Для получения дополнительной информации см. «Спросите разметку профессора» в http://diveintohtml5.ep.io/canvas.html#paths

Answer 3

Конвертируйте ваши рисунки в растровые изображения.