the - ¿Lienzo HTML5 distorsionado?

title html5

Question

Pensé por un poco de diversión que echaría un vistazo al lienzo. Parecía bastante fácil dibujar un cuadro así que prácticamente copié un ejemplo del sitio del desarrollador de mozilla. Puedes verlo aquí: http://jsfiddle.net/Wolfy87/DZBwp/

Como pueden ver, se ha distorsionado. ¿Alguien tiene alguna idea? Estoy configurando el mismo x / y y el mismo ancho / alto. Debería ser una caja, ¿verdad?

Answer 1

Canvas funciona como una etiqueta de imagen

Un lienzo funciona como una imagen, tiene un ancho y una altura.

En el caso de una imagen, el navegador puede calcular el ancho y la altura inspeccionando el archivo. En el caso de un lienzo, el ancho y el alto no se pueden inferir, por lo que debe establecerlos directamente como atributos.

<canvas width="400" height="400" />

CSS

Cuando establece el ancho usando CSS, la altura se ajustará también para mantener la relación de aspecto, al igual que una imagen. Puede establecer que el ancho sea 100% y el lienzo llenará el contenedor.

canvas { 
  width:100% 
}

Si configura tanto el ancho como el alto, el lienzo se estirará para que se ajuste al espacio que ha asignado, como una imagen.

Valores predeterminados

El ancho y la altura predeterminados de un lienzo son 300x150, una proporción de 2/1.

Answer 2

Lo arreglé yo mismo, tuve que establecer el ancho y alto a través de la etiqueta, no de CSS. Conjetura afortunada.

<canvas width=''400'' height=''300''></canvas>

Answer 3

Tuve el mismo problema, pero pude resolverlo e incluir las etiquetas de altura y ancho en mi CSS, pero no pude usar la unidad ''px'' o ''%'' en la altura o el ancho.

canvas#my-id{
    width:400;
    height:300;
}

Ya sea que uses la etiqueta html, css o lo configures con javascript / jquery, etc., no debería ser materia.