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

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

yulia
yuliaoriginal
2018-10-24 17:14:136607parcourir

est un nouvel élément en HTML5. Il peut être combiné avec des scripts JavaScript pour dessiner divers graphiques. Que savez-vous du canevas ? Pouvez-vous tracer des lignes droites avec une toile ? Cet article vous expliquera comment tracer une ligne droite avec une toile. Il a une certaine valeur de référence. Les amis intéressés peuvent y jeter un œil.

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 Définissez un canevas sur le navigateur et donnez-lui un nom d'identification. Vous pouvez définir la taille, la couleur d'arrière-plan, etc. du canevas en fonction. vos besoins.

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>
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】

1

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn