HTML5, canvas y strokeRect: líneas más angostas?

Question

Un uso lona estúpido simple:

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

ctx.strokeStyle = "#CCCC00"; 
ctx.lineWidth = 3; 
ctx.strokeRect(0, 0, width, height); 

se obtiene un rectángulo con líneas más estrechas a lo largo de la parte superior e izquierda:

¿Por qué sucede esto? ¿Debo compensar con relleno? Es molesto.

Answer 1

2 cosas.

En primer lugar, lineWidths impares (1, 3, 5, ...) nunca se aplicará limpiamente con valores de píxeles enteros dibujados. Esto se debe a que X e Y se refieren al espacio entre los píxeles en lugar de sus centros. Por lo tanto, un trazo de 1 que se extiende desde [1,1] a [1,10] derrama la mitad en el píxel en la columna izquierda de píxeles y la mitad en el derecho. Si en su lugar dibuja esa línea desde [1.5,1] a [1.5,10], entonces llena la mitad a la izquierda y la mitad a la derecha, completando la columna de píxeles completa a la perfección.

Cualquier ancho de número impar mostrará este comportamiento, pero incluso los números no lo harán porque llenan un píxel completo en cada lado que parece limpio.

---

En segundo lugar, la caja está oscurecida por la parte superior del lienzo. Cuando centras tu carrera de 3px en [0,0], se derrama tanto como arriba y hacia la izquierda como [-1.5, -1.5] que está fuera del rango visible del lienzo. Entonces parece la mitad de grueso de lo que debería ser.

---

ver la prueba de diferencia aquí: http://jsfiddle.net/F4cqk/2/

El primero de ellos es como su código. El segundo se aleja del borde superior izquierdo para mostrar su uniforme de ancho. Y el tercero muestra cómo renderizar un trazo de 3 px sin borrosidad de subpixel.

Answer 2

Debido a que usted le dijo que para dibujar una línea con el ancho de 3 a 0 ... así 1/3 de que va a estar fuera de su lienzo ...

http://jsfiddle.net/mhFLG/ vs http://jsfiddle.net/mhFLG/1/