¿Por qué no puedo cambiar el tamaño del lienzo?
Establece el tamaño del lienzo a través de HTML. Puede establecer el tamaño del elemento Canvas directamente en la página HTML:
& ltcanvas id = " test canvas " width = " 200 " height = " 100 " >& lt/canvas & gt; p>
También puedes establecer el tamaño del lienzo a través de js:
var canvas = document. getelementbyid(" test canvas ");
Canvas.width = 200; p>
canvas.height = 100;
Ambos métodos funcionarán.
Cabe señalar que después de configurar el tamaño del lienzo, todos los estilos y contenidos del lienzo se restablecerán (por ejemplo, después de configurar el tamaño del lienzo, los gráficos en el lienzo desaparecerán y será necesario volver a dibujarlos). ).
Ejemplo
Primero, creamos un lienzo con un ancho de 200 px, una altura de 100 px y un borde rojo. Luego dibuja un cuadrado de 20*20 en el medio:
Contraseña
Copiar código
& lt! DOCTYPE html & gt
& lthtml & gt
& lthead & gt
& lttitle & gt& lt/title & gt;
& lt/head & gt;
& ltbody & gt
& ltcanvas id = " testCanvas " & gt& lt/canvas & gt;
& ltscript & gt
var lienzo, contexto;
lienzo = documento . getelementbyid(" lienzo de prueba ");
lienzo.width = 200
<; p>Canvas.height = 100;canvas.style.border = "1px rojo sólido";
context = canvas.get context(" 2d ");
p>
contexto estilo de trazo = " # 99cc 33 ";
context.fillRect(90, 40, 20, 20); & gt;
& lt/body & gt;
& lt/html & gt;
Copiar código
Reducir tamaño del lienzo por 1x.
Utilice css para establecer el tamaño del lienzo
Código relacionado
canvas style width = " 100 px "; style . height = " 50px ";
Impacto
Análisis
Descubrimos que el lienzo general se ha reducido 1 veces.
Utilice js para establecer el tamaño del lienzo.
Código relacionado
Copiar código
Canvas.width = 100
canvas.height = 50
//Después de configurar el tamaño del lienzo, se restablecerán todos los estilos. Entonces necesitas volver a dibujar el cuadrado.
context.fillRect(90, 40, 20, 20);
Copiar código
Impacto
Análisis
Equivale a retirar la mitad derecha y la mitad inferior del lienzo, logrando el efecto deseado.