¿Por qué no puedo cambiar el tamaño del lienzo?

Agregue un elemento de lienzo a la página HTML (no se puede usar js para agregar un lienzo dinámicamente).

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;

También puedes establecer el tamaño del lienzo a través de js:

var canvas = document. getelementbyid(" test canvas ");

Canvas.width = 200;

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.