Commentaire: Il y a deux formulaires, l'un est un trait (remplissage) et l'autre est rempli (course). Le code d'implémentation spécifique est le suivant. Les amis intéressés peuvent y faire référence. J'espère que ce sera utile à tout le monde.
Tout d'abord, placez un élément Canvas dans la page HTML, où l'élément Canvas doit avoir trois ID d'attribut, largeur et hauteur.<lebvas> </ canvas>
Obtenez l'objet Canvas et obtenez le contexte var cxt = document.getElementyid («démo»). GetContext (2D); où le paramètre 2D est déterministe.
Lorsque vous commencez à dessiner, il y a deux formes, l'une est un trait et l'autre est un coup.
Code javascript:
<script linguisse = "javascript">
var cxt = document.getElementByid ('démo'). getContext ("2d");
cxt.beginPath ();
cxt.fillStyle = "# f00"; / * Définir la couleur de remplissage * /
cxt.fillrect (0,0,200,100); / * dessiner un rectangle, les deux premiers paramètres déterminent la position de départ, les deux dernières sont la largeur et la hauteur du rectangle respectivement * /
cxt.beginPath ();
cxt.strokestyle = "# 000"; / * set border * /
cxt.linewidth = 3; / * largeur de bordure * /
cxt.strokect (0 120 200,100);
cxt.beginPath ();
cxt.moveto (0,350);
cxt.lineto (100 250);
cxt.lineto (200 300);
cxt.closepath (); / * étape facultative, fermez le chemin dessiné * /
cxt.stroke ();
</cript>
Image de reproduction: