Toile HTML5

 <Canvas ID = MyCanvas Width = 400 Height = 200>

Le canevas <Canvas> par défaut affiche un rectangle vide sans bordure sur la page. Afin de le faire afficher le contour, ajoutez-y une lunette en pointillés en définissant les règles du style:

 Canvas {Border: 1px en pointillé noir;}

Pour terminer la tâche de dessin, tout d'abord, nous devons obtenir l'objet <Canvas>, puis obtenir son contexte de dessin à deux dimensions.

L'exemple de démonstration suivant est obtenu par le dessin du dessin lorsque la page est chargée:

 <Script> Window.onload = function () {var canvas = document.getElementById (MyCanvas);

(1) le point de départ est (50,50) en dessous (50,50), et le point de fin est (150 150) lignes droites

 context.moveto (50, 50);

(2) Réglez la largeur et la couleur des lignes avec des attributs Linewidth et StrokeSetyle

 // Lignet Lignet Context.Leswidth = 10; 50);

(3) Réglez la forme des deux extrémités de la ligne (type de tête de ligne) avec la propriété LineCap:

1. Butt: Fangtou (valeur par défaut)
2. Round: tête ronde
3. Square: Tête carrée s'étendant (l'effet est similaire à Butt, mais la longueur des deux lignes de la ligne augmentera la longueur de la moitié de la largeur de la ligne)

 var canvas = document.getElementById (myCanvas); Side Tore Context.Moveto (50, 50); ; Context. context.lineCap = Square; context.stroke ();

L'exemple ci-dessus peut voir que chaque fois que le nouveau segment de ligne est dessiné, la méthode beginPath () est appelée.

Sans cette étape, chaque fois que vous appelez TRAD (), vous réticulerez le segment de ligne d'origine sur la toile. Surtout comme l'exemple ci-dessus, les attributs de contexte doivent être modifiés lors du dessin d'une nouvelle ligne.