5
Estoy leyendo un libro en Html5 y sobre lienzo, el siguiente código generará líneas de 1 píxel de espesor ... Utiliza 0.5 como la coordenada. Si se cambia a 0 o 10, o a un entero, las líneas serán grises y de 2 píxeles de grosor. ¿Porqué es eso? Que lo más extraño que he visto últimamente ... toda la programación anterior en Apple o Win32 API, van por coordenadas enteras.En Html5, dibuje de (0.5, 0) a (0.5, 600) para obtener una línea gruesa de 1 píxel en el lienzo. El 0.5 es extraño?
<!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>
Otra cosa extraña es, para conseguir un 1 píxel por 1 píxel punto negro, tengo que recurrir a 0,5 para x, pero el uso de números enteros para y
for (x = 0.5; x < 500; x += 10) {
context.moveTo(x, 0)
context.lineTo(x, 1)
}
si utilizo el siguiente, entonces consigo un gris, "punto largo"
for (x = 0.5; x < 500; x += 10) {
context.moveTo(x, 0.5)
context.lineTo(x, 1.5)
}
+1 - El enlace tiene la mejor explicación, con algunos buenos diagramas. – Castrohenge
Este enlace explica el problema y la solución. –
El enlace ahora está roto – streppel