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
- yuliaoriginal
- 2018-10-24 17:14:136623parcourir
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>Image d'effet :
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!