Comentário: Existem dois formulários, um é o golpe (preenchimento) e o outro é preenchido (golpe). O código de implementação específico é o seguinte. Amigos interessados podem se referir a ele. Espero que seja útil para todos.
Primeiro, coloque um elemento de tela na página HTML, onde o elemento Canvas deve ter três IDs de atributo, largura e altura.<lVAs> </canvas>
Obtenha o objeto Canvas e obtenha o contexto var cxt = document.getElementById ('Demo'). GetContext (2d); onde o parâmetro 2D é determinístico.
Quando você começa a desenhar, há duas formas, uma é o golpe e o outro é o golpe.
Código JavaScript:
<Script Language = "JavaScript">
var cxt = document.getElementById ('Demo'). getContext ("2D");
CXT.BEGINPATH ();
cxt.fillstyle = "#f00";/*Definir cor de preenchimento*/
cxt.fillrect (0,0,200.100);/* Desenhe um retângulo, os dois primeiros parâmetros determinam a posição inicial, os dois últimos são a largura e a altura do retângulo, respectivamente*/
CXT.BEGINPATH ();
cxt.strokestyle = "#000";/*defina borda*/
cxt.linewidth = 3;/*largura da borda*/
cxt.stragerect (0,120.200.100);
CXT.BEGINPATH ();
cxt.moveto (0.350);
cxt.lineto (100.250);
cxt.lineto (200.300);
cxt.closePath ();/*Etapa opcional, feche o caminho desenhado*/
cxt.stroke ();
</script>
Imagem de reprodução: