reales - El lienzo se estira al usar CSS pero es normal con propiedades de "ancho"/"alto"

libro de android studio en español pdf

Question

Tengo 2 lienzos, uno usa atributos HTML de width y height para ajustarlo, y el otro usa CSS:

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Compteur1 muestra como debería, pero no compteur2. El contenido se dibuja usando JavaScript en un lienzo de 300x300.

¿Por qué hay una diferencia de visualización?

Answer 1

Corrección Shanimal

var el = $(''#mycanvas'');
el.attr(''width'', parseInt(el.css(''width'')))
el.attr(''height'', parseInt(el.css(''height'')))

Answer 2

El lienzo se alargará si establece el ancho y alto en su CSS. Si desea manipular dinámicamente la dimensión del lienzo, debe usar JavaScript de esta manera:

canvas = document.getElementById(''canv'');
canvas.setAttribute(''width'', ''438'');
canvas.setAttribute(''height'', ''462'');

Answer 3

El navegador usa el ancho y el alto del CSS, pero el elemento del lienzo se escala en función del ancho y el alto del lienzo. En javascript, lea el ancho y alto de css y configure el ancho y la altura del lienzo.

var myCanvas = $(''#TheMainCanvas'');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();

Answer 4

Para elementos <canvas> , las reglas de CSS para width y height establecen el tamaño real del elemento canvas que se dibujará en la página. Por otro lado, los atributos HTML de width y height establecen el tamaño del sistema de coordenadas o "cuadrícula" que usará la API de canvas.

Por ejemplo, considere esto ( jsfiddle ):

var ctx = document.getElementById(''canvas1'').getContext(''2d'');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 30, 30);
var ctx2 = document.getElementById(''canvas2'').getContext(''2d'');
ctx2.fillStyle = "red";
ctx2.fillRect(10, 10, 30, 30);

canvas {
border: 1px solid black;
}

<canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas>
<canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas>

Ambos han tenido lo mismo dibujado sobre ellos en relación con las coordenadas internas del elemento canvas. Pero en el segundo lienzo, el rectángulo rojo será el doble de ancho porque el lienzo como un todo se extiende a través de un área más grande por las reglas de CSS.

Nota: Si no se especifican las reglas de CSS para el width y / o height , el navegador usará los atributos HTML para dimensionar el elemento de modo que 1 unidad de estos valores sea igual a 1px en la página. Si no se especifican estos atributos, tendrán un width predeterminado de 300 y una height de 150 .

Answer 5

Para establecer el width y la height que necesita, puede usar

canvasObject.setAttribute(''width'', ''475'');

Answer 6

Parece que los atributos de width y height determinan el ancho o alto del sistema de coordenadas del lienzo, mientras que las propiedades de CSS solo determinan el tamaño del cuadro en el que se mostrará.

Esto se explica en http://www.whatwg.org/html#attr-canvas-width (necesita JS) o http://www.whatwg.org/c#attr-canvas-width (probablemente se coma su computadora) :

El elemento canvas tiene dos atributos para controlar el tamaño del mapa de bits del elemento: width y height . Estos atributos, cuando se especifiquen, deben tener valores que sean enteros válidos no negativos . Las reglas para analizar enteros no negativos se deben usar para obtener sus valores numéricos. Si falta un atributo, o si al analizar su valor devuelve un error, se debe usar el valor predeterminado en su lugar. El atributo width predeterminado en 300, y el atributo height predeterminado en 150.

Answer 7

Si desea un comportamiento dinámico basado, por ejemplo, en consultas de medios CSS, no utilice atributos de ancho y alto de lienzo. Use las reglas de CSS y luego, antes de obtener el contexto de representación de lienzo, asigne atributos de ancho y alto a los estilos de ancho y alto de CSS:

var elem = document.getElementById("mycanvas");
elem.width = elem.style.width;
elem.height = elem.style.height;
var ctx1 = elem.getContext("2d");
...