2011-05-22 24 views
15

He estado jugando con el lienzo html5 y no entiendo cómo funcionan las unidades. Vi en MDN que una "unidad" en el lienzo debería ser de 1 píxel. Así que dibujé un lienzo de 800 píxeles de ancho x 400 píxeles de alto. Luego dibujé un rectángulo en la coordenada 400, 200, que pensé que pondría la esquina superior izquierda en el centro. Sin embargo, se alejó de la pantalla. Cuando lo reduje a 200, 100 o así pude ver el rectángulo, pero lógicamente no tenía sentido dónde terminaba.unidades de lienzo html5

Cuento corto. ¿Cómo funciona el sistema de coordenadas en el lienzo?

+1

¿Ha establecido el ancho y alto con CSS o con los atributos HTML 'width' y' height'? – icktoofay

+0

Por favor, publique el código y posiblemente haga un http://jsfiddle.net. –

+1

Tenga en cuenta que 1 unidad de lienzo tiene 1 píxel si las dimensiones lógicas del lienzo están configuradas de la misma manera que las dimensiones de visualización Y no ha realizado ninguna escala en su contexto; en general, sin embargo, un lienzo puede rasterizar los tamaños de sus "píxeles" a algún otro tamaño en su mapa de bits, y luego el navegador puede elegir dibujar ese mapa de bits en algún otro tamaño. – Phrogz

Respuesta

19

Eso debería ser correcto. Aquí está un ejemplo:

http://jsfiddle.net/hvyvY/

Tenga en cuenta que debe utilizar el ancho y atributos altura de la HTMLCanvasElement para establecer su tamaño, como:

<canvas id="canvas1" width="800" height="400">

no el estilo CSS de ese elemento. Cambiar el estilo CSS del lienzo lo escalará en su lugar.

+1

Gracias! Por lo tanto, es intuitivo cuando estás acostumbrado a usar CSS para controlar el ancho y el alto. Me costó horas pero lo ordenaste por mí. –