HTML5 Canvas에서 채우기와 채우기 사이의 간격을 제거하는 방법은 무엇입니까?

Question

한 채우기와 다른 채우기 사이의 기존 공간이 귀찮습니다. 각 채우기는 경사면에 맞습니다. 정확히 줄을 채우기를 기대하지만 공간이 있습니다.

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

당신은 검은 삼각형의 흰색 선 (공백)를 볼 수 있습니다

이 샘플 코드입니다. 사실 삼각형의 포인트는 플래시 용 자동 생성 프로그램 인 에 의해 만들어지며 플래시는 공백없이 삼각형을 표시 할 수 있지만 HTML5는 표시 할 수 없습니다. 누구나 그 줄을 지울 생각이 있습니까?

Answer 1

당신은 화면 픽셀이 0이 아니라 이후 좌표 일부 0.5을 추가해야 할 수도 있습니다 0 자세한 내용은 1 사이의 http://diveintohtml5.ep.io/canvas.html#paths

Answer 2

당신은에 획을 추가 할 수있는 "구하라 교수 마크 업"을 참조하십시오 이 문제를 추가하여 삼각형 :

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 3

는 비트 맵에 그림을 변환합니다.