Recientemente, por necesidades laborales, conocí la etiqueta Canvas en HTML.
Canvas es un nuevo componente de HTML5. Es como una cortina sobre la que se pueden dibujar varios gráficos, animaciones, etc. mediante JavaScript.
En la era anterior a Canvas, el dibujo sólo se podía lograr con la ayuda de complementos Flash, y las páginas tenían que usar JavaScript y Flash para interactuar. Con Canvas, ya no necesitamos Flash y podemos usar JavaScript directamente para completar el dibujo.
El problema comenzó cuando yo mismo escribí un saludo mundo después de ver el tutorial. Mira el código a continuación:
<!DOCTYPE html><html lang=en><cuerpo><canvas id=canvas1 estilo=ancho: 200px;alto: 200px; borde:1px negro sólido;></canvas><script> var oC = document.getElementById( 'lienzo1'); var ctx = oC.getContext(2d); 0); ctx.lineTo(200, 200); ctx.stroke();</script></body></html>
El significado del código anterior es dibujar una línea recta en un lienzo con un ancho y un alto de 200 px cada uno. El punto inicial de la línea recta es (0,0) y el punto final es (200,200);
Sin embargo, la imagen dibujada por el navegador es:
Echa un vistazo a esta imagen ~ ¿Por qué hay tanta pendiente? No debería ser~ Debería ser una línea diagonal~~
Más tarde, después de buscar información, descubrí que al configurar el ancho y el alto de la etiqueta del lienzo, existen los siguientes métodos y consecuencias:
El ancho predeterminado del elemento Canvas es 300 px y el alto es 150 px. Para establecer su ancho y alto, puede utilizar el siguiente método:
Método uno:
1 <ancho del lienzo=500 alto=500$amp;>amp;$lt;/canvas>
Método 2: utilizar la operación HTML5 Canvas API
1 var canvas = document.getElementById('la identificación del lienzo que se va a operar');
2 lienzo.ancho = 500;
3 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
1 #Para operar la identificación del lienzo {
2 ancho: 1000 px;
3 altura: 1000 px;
4 ｝
También incluye style= en estilos en línea. Es decir, en el ejemplo anterior, también se producirá estiramiento.
Método 2: las operaciones que utilizan la API HTML5 Canvas se ampliarán
1 var canvas = document.getElementById('la identificación del lienzo que se va a operar');
2 lienzo.estilo.ancho = 1000px;
3 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.
Por lo tanto, a partir de la información anterior, podemos saber que la razón es que el código en mi ejemplo anterior estirará el ancho y el alto del lienzo, lo que hará que la imagen no cumpla con las expectativas.
Ahora he reescrito un ejemplo de código para establecer correctamente el ancho y el alto del lienzo:
<!DOCTYPE HTML><html><body><canvas id=myCanvas width=200 height=200 style=border:1px solid black;> Su navegador no admite el elemento lienzo.</canvas><script type=text/ javascript> var c = document.getElementById(myCanvas); var cxt = c.getContext(2d); cxt.lineTo(200, 200); cxt.stroke();</script></body></html>
resultado:
Finalizar.
ResumirLo 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.