0
Le Example.HTML5 Antialias de canevas
Bonjour à tous. J'ai une toile avec un fond rouge. Sur ce que j'ai des rangées de boîtes, qui vont exactement après l'autre. Chaque boîte commence exactement à l'endroit où la boîte précédente se termine, et elles ont toutes la même asymétrie. Il ne devrait donc pas y avoir d'espace entre les bords, mais comme vous pouvez le voir dans l'exemple, il y a des espaces.
Est-ce que quelqu'un sait pourquoi cela se produit et comment s'en débarrasser?
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>
Ajouter un pixel sur le côté droit de chaque boîte et le trou en va – Blindman67
@ Blindman67 cela ne fonctionne pas quand 'ctx.clearRect (0,0, canvas.width, canvas.height);' a été appliqué. – Zhirayr
Avez-vous mis à jour jsBin? – Rohan210