Comentario: Hay dos formularios, uno es accidente cerebrovascular (relleno) y el otro es relleno (trazo). El código de implementación específico es el siguiente. Los amigos interesados pueden referirse a él. Espero que sea útil para todos.
Primero, coloque un elemento de lona en la página HTML, donde el elemento lienzo debe tener tres ID de atributo, ancho y altura.<Canvas> </Canvas>
Obtenga el objeto Canvas y obtenga el contexto var cxt = document.getElementById ('demo'). GetContext (2d); donde el parámetro 2D es determinista.
Cuando comienzas a dibujar, hay dos formas, una es un accidente cerebrovascular y el otro es un trazo.
Código JavaScript:
<script language = "javaScript">
var cxt = document.getElementById ('demo'). getContext ("2d");
cxt.beginpath ();
cxt.fillstyle = "#f00";/*Establecer color de relleno*/
cxt.fillrect (0,0,200,100);/* Dibuja un rectángulo, los dos primeros parámetros determinan la posición inicial, los dos últimos son el ancho y la altura del rectángulo respectivamente*/
cxt.beginpath ();
cxt.strokestyle = "#000";/*set Border*/
cxt.lineWidth = 3;/*Ancho de borde*/
cxt.Strokerect (0,120,200,100);
cxt.beginpath ();
cxt.moveto (0,350);
cxt.lineto (100,250);
Cxt.lineto (200,300);
cxt.closePath ();/*Paso opcional, cierre la ruta dibujada*/
cxt.stroke ();
</script>
Imagen de reproducción: