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.