HTML5 Canvas抗鋸齒
[英]HTML5 Canvas antialias
問題描述
例子 。
大家好。 我有一個紅色背景的畫布。 在它上面，我有一排排盒子，它們彼此緊緊相連。 每個框都精確地從上一個框的結尾處開始，並且它們都有相同的傾斜度。 因此，邊緣之間不應存在任何間隙，但是如示例中所見，存在間隙。
有誰知道為什么會這樣，以及如何擺脫它。
console.clear(); var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var world = { centerY: canvas.height / 2, centerX: canvas.width / 2 } var rowCount = 14; var box = { width: 20, height: 20, skew: 10 } function drawBox(x, y, id) { ctx.save(); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + box.width, y); ctx.lineTo(x + box.width + box.skew, y - 20); ctx.lineTo(x + box.skew, y - box.height); ctx.lineTo(x, y); ctx.closePath(); ctx.clip(); ctx.clearRect(0,0, canvas.width, canvas.height); ctx.fillStyle = id % 2 == 0 ? 'lightgray' : 'darkgray'; ctx.fill(); ctx.restore(); } for (var i = 0; i < 112; i++) { var k = Math.floor(i / rowCount) * rowCount; console.log(k); drawBox(i * box.width - (k * box.width), Math.floor(i / rowCount) * box.height, i) }
#canvas { background-color: red; width: 800px; height: 600px; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <canvas id="canvas"> </canvas> </body> </html>
1 個解決方案
解決方案1
0 2016-12-13 10:04:58
在函數drawBox中更新：
ctx.lineTo(x+box.width, y);
ctx.lineTo(x+box.width + box.skew, y - 20);
至
ctx.lineTo(x+box.width+1, y);
ctx.lineTo(x+box.width + box.skew +1, y - 20);
"HTML5 畫布禁用原始（曲線，...）上的抗鋸齒"
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.