Comentario: Hoy aprendí el lienzo de HTML5 y descubrí que las coordenadas y el tamaño de FillRect han sido incorrectos. Después de estudiar durante mucho tiempo, descubrí que el ancho y la altura del lienzo deben ingresarse en la etiqueta de lienzo.
Fillrect (100,100,100,100) Los primeros 2 100 se refieren a las coordenadas, y los últimos 2 100 se refieren al ancho y la altura.Hoy aprendí el lienzo de HTML5 y descubrí que las coordenadas y el tamaño de FillRect han sido incorrectos. Después de estudiar durante mucho tiempo, descubrí que el ancho y la altura del lienzo deben ingresarse en la etiqueta de lienzo. Deprimido durante mucho tiempo.
Método de error 1:
<! Doctype html>
<html lang = "en">
<Evista>
<meta charset = "utf-8">
<title> documento </title>
<estilo>
#mycanvas {
Ancho: 200px;
Altura: 200px;
Antecedentes: amarillo;
}
</style>
</ablo>
<Body>
<Canvas>/Canvas>
<script>
var c = document.getElementById ('mycanvas');
var ctx = c.getContext ("2d");
ctx.fillstyle = '#F36';
ctx.fillrect (100, 100, 100, 100);
</script>
</body>
</html>
Manera incorrecta 2:
<! Doctype html>
<html lang = "en">
<Evista>
<meta charset = "utf-8">
<title> documento </title>
</ablo>
<Body>
<Canvas> </Canvas>
<script>
var c = document.getElementById ('mycanvas');
var ctx = c.getContext ("2d");
ctx.fillstyle = '#F36';
ctx.fillrect (100, 100, 100, 100);
</script>
</body>
</html>
Mostrar resultados:
La forma correcta:
<! Doctype html>
<html lang = "en">
<Evista>
<meta charset = "utf-8">
<title> documento </title>
</ablo>
<Body>
<Canvas> </Canvas>
<script>
var c = document.getElementById ('mycanvas');
var ctx = c.getContext ("2d");
ctx.fillstyle = '#F36';
ctx.fillrect (100, 100, 100, 100);
</script>
</body>
</html>