Explication graphique détaillée sur la façon de tracer une ligne droite à l'aide d'un canevas HTML5-tutoriel HTML-php.cn

Explication graphique détaillée sur la façon de tracer une ligne droite à l'aide d'un canevas HTML5

yulia

Libérer： 2018-10-24 17:14:13

original

6626 Les gens l'ont consulté

Tout d'abord, je vais vous présenter les propriétés nécessaires pour tracer une ligne droite avec Canvas

moveTo(x,y) peut définir les coordonnées de la position de départ de la ligne
lineTo(x,y) peut définir la ligne Les coordonnées de la position finale
lineWidth peut définir la largeur de la ligne
StrokeStyle peut définir la couleur de la ligne

Utiliser le canevas pour dessiner un ligne droite, étapes détaillées :

1. Utilisez la balise

2. Utilisez var c=document.getElementById("myCanvas") pour obtenir l'élément canevas

3. Créez un objet contextuel via var ctx=c.getContext("2d")<.>

4. Définissez le point de départ et le point final de la ligne droite, la position de départ moveTo(25,25) et la position de fin lineTo(175,175)

5. lineWidth = 5 pour définir la largeur de la ligne, ctx.StrokeStyle = "red" pour définir la couleur de la ligne

6. Enfin, utilisez ctx.Stroke() pour tracer une ligne droite, et c'est terminé

Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <canvas id="myCanvas" width="200px" height="200px" style="border: 1px solid #000000;"></canvas>
 </body>
 <script type="text/javascript">  
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.moveTo(25,25);
  ctx.lineTo(175,175);
  ctx.lineWidth = 5;
  ctx.strokeStyle = "red";
  ctx.stroke();
 </script>
</html>

Copier après la connexion

Image d'effet :

Explication graphique détaillée sur la façon de tracer une ligne droite à laide dun canevas HTML5

Ce qui précède vous présente comment dessiner une quinte ligne avec toile. C'est la partie la plus simple de la toile. Les débutants doivent l'essayer par eux-mêmes pour voir si vous pouvez écrire un tel effet, j'espère que cet article vous sera utile !

【Tutoriels associés recommandés】

Tutoriel vidéo HTML52
Tutoriel vidéo JavaScript3. tutoriel bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!