Explicación detallada de la diferencia entre ancho, alto y estilo en lienzo H5

Recientemente, encontré un pequeño problema al aprender las propiedades del lienzo, que es el ancho y el alto del lienzo. Finalmente lo resolví buscando información relevante, así que no diré mucho sobre el proceso de solución a continuación. Echemos un vistazo a los detalles.

1. Cuando se utiliza el atributo ancho y alto, la pantalla no se estirará normalmente de la siguiente manera:

 <canvas id=mycanvas width=300 height=300>El navegador no es compatible con Canvas, ¡actualice o utilice otro navegador! </canvas><script type=text/javascript> var lienzo = document.getElementById(mycanvas), ctx = canvas.getContext('2d'); ctx.moveTo(0,0); .stroke();</script>

El efecto de carrera es el siguiente, que es una línea diagonal.

2. Al usar estilo, la imagen se estirará (deformará).

 <estilo> #mycanvas { ancho: 150px; alto: 150px } </estilo>

Efecto de operación

El lienzo es un tablero de dibujo y una hoja de papel de dibujo. El tablero de dibujo equivale a un contenedor. El dibujo/trabajo se realiza sobre el papel de dibujo.

El ancho y alto predeterminados del tablero de dibujo y el papel de dibujo son 300 * 150. Cuando el ancho y el alto del papel de dibujo y el tablero de dibujo son iguales, la imagen no se estirará cuando el ancho y el alto del papel de dibujo y. el tablero de dibujo es diferente, la imagen se estirará (deformará).

1. Los atributos de ancho y alto establecen el ancho y alto del tablero de dibujo y del papel de dibujo.

Por ejemplo: ancho = 300 alto = 300 significa que el ancho y el alto del tablero de dibujo son 300 * 300, y el ancho y el alto del papel de dibujo también son 300 * 300. La imagen diagonal de 300 * 300 del trabajo no. ser estirado.

2. En el estilo solo se establecen el ancho y el alto del tablero de dibujo. El ancho y el alto del papel de dibujo siguen siendo el valor predeterminado de 300*150.

(Tome la imagen de arriba como ejemplo). Por lo tanto, solo una parte de la imagen diagonal de 300 * 300 en la que está trabajando se dibuja en el papel de dibujo, de la siguiente manera:

Por cierto, el papel de dibujo no dejará el tablero de dibujo vacío, por lo que el papel de dibujo y la imagen deben estirarse al mismo tamaño que el tablero de dibujo. En este ejemplo, el ancho del papel de dibujo y el ancho de la mesa de trabajo son ambos 30, y la altura es la mitad de la mesa de trabajo, por lo que solo necesita estirar la altura dos veces, para que la imagen también se estire y se adelgace, la La dirección X permanece sin cambios y la dirección Y se duplica, por lo que obtenemos la imagen deformada.

Respecto a la configuración de ancho y alto de Canvas en HTML5

El elemento Canvas tiene 300 px de ancho y 150 px de alto de forma predeterminada. Para establecer su ancho y alto, puede utilizar el siguiente método (no se estirará):

Método uno:

<ancho del lienzo=500 alto=500></canvas>

Método 2: utilice HTML5 Canvas API para operar correctamente

var canvas = document.getElementById('la identificación del lienzo que desea operar');

lienzo.ancho = 500;

lienzo.ancho = 500;

Si el ancho y el alto se establecen mediante el siguiente método, el elemento Canvas se estirará desde el tamaño original hasta el ancho y alto establecidos:

Método 1: el uso de CSS ampliará el

#Para operar la identificación del lienzo {

ancho: 1000 px;

altura: 1000 px;

｝

Método 2: las operaciones que utilizan la API HTML5 Canvas se ampliarán

var canvas = document.getElementById('la identificación del lienzo que desea operar');

lienzo.estilo.ancho = 1000px;

lienzo.estilo.altura = 1000px;

Método 3: Se estirará el uso de $(#id).width(500) de jquery.

Otros: El ancho y alto del lienzo no se pueden expresar como porcentajes. El lienzo mostrará el porcentaje como un valor numérico.

Lo anterior es el contenido completo de este artículo. Espero que el contenido de este artículo tenga cierto valor de referencia para el estudio o trabajo de todos. Si tiene alguna pregunta, puede dejar un mensaje para comunicarse. Red.