5
Sto leggendo un libro su Html5 e su tela, il codice seguente genererà linee spesse 1 pixel ... Usa 0.5 come coordinate. Se viene modificato su 0 o 10 o su un numero intero, le linee saranno grigie e spesse 2 pixel. Perché? Che la cosa più strana che ho visto ultimamente ... tutta la programmazione precedente su API Apple o Win32, passano per coordinate intere.In Html5, traccia da (0,5, 0) a (0,5, 600) per ottenere una linea spessa 1 pixel su tela. Lo 0,5 è strano?
<!DOCTYPE html>
<body>
<canvas id="c" width="800" height="600"></canvas>
</body>
<script>
var c_canvas = document.getElementById("c")
var context = c_canvas.getContext("2d")
for (x = 0.5; x < 500; x += 10) {
context.moveTo(x, 0)
context.lineTo(x, 375)
}
context.strokeStyle = "#000"
context.stroke()
</script>
Un'altra cosa strana è, per ottenere un 1 pixel per 1 pixel puntino nero, devo attingere 0,5 per x, ma lo uso interi per y
for (x = 0.5; x < 500; x += 10) {
context.moveTo(x, 0)
context.lineTo(x, 1)
}
se uso il seguente, poi ho un grigio, "più a lungo punto"
for (x = 0.5; x < 500; x += 10) {
context.moveTo(x, 0.5)
context.lineTo(x, 1.5)
}
+1 - Link ha la spiegazione migliore, con alcuni buoni diagrammi. – Castrohenge
Questo collegamento spiega il problema e la soluzione. –
Il link è ora rotto – streppel