Maison >interface Web >Tutoriel H5 >Comment dessiner un rectangle avec de la toile ? Introduction à deux méthodes pour dessiner des rectangles sur toile

Comment dessiner un rectangle avec de la toile ? Introduction à deux méthodes pour dessiner des rectangles sur toile

不言original: 2018-09-17 13:43:4517352parcourir

L'élément

canvas utilise JavaScript pour dessiner des images sur la page Web. Le canevas est une zone rectangulaire dont vous pouvez contrôler chaque pixel. Canvas propose de nombreuses façons de dessiner des chemins, des rectangles, des cercles, des personnages et d'ajouter des images. Alors, Comment dessiner un rectangle à l'aide d'une toile ? L'article suivant vous présentera la méthode de mise en œuvre pour dessiner un rectangle sur toile. Vous pouvez y jeter un oeil si vous en avez besoin.

Ce que nous devons savoir, c'est que la méthode liée aux rectangles dans le canevas est rect(). Utilisez la méthode Stroke() ou fill() pour dessiner un rectangle sur le canevas.

La méthode rect() peut recevoir 4 paramètres : la coordonnée x du rectangle, la coordonnée y du rectangle, la largeur du rectangle et la hauteur du rectangle. Les unités de ces paramètres sont les pixels.

Nous allons maintenant utiliser les méthodes Strokerect() et Fillrect() pour dessiner un rectangle.

Tout d'abord, jetons un coup d'œil à un exemple de rectangle rempli dessiné à l'aide de la méthode fillrect() dans Canvas.

Le rectangle dessiné sur le canevas par la méthode fillRect() sera rempli avec la couleur spécifiée. La couleur du remplissage est spécifiée via la propriété fillStyle.

    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8" />  
    <title>用canvas画矩形</title>  
    <style>  
    </style>  
    </head>  
    <body>  
    <canvas id="canvas" width="600" height="400"></canvas>  
    <script type="text/javascript">  
      function draw(id){  
          var canvas = document.getElementById(id);  
          var context = canvas.getContext(&#39;2d&#39;);  //getContext() 方法可返回一个对象  
          context.fillStyle = "green";  // 设置或返回用于填充绘画的颜色、渐变或模式              
          context.fillRect(50,50,400,300);  // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形      
     }  
     draw("canvas");  
    </script>  
    </body>  
    </html>

L'effet du dessin d'un rectangle rempli sur toile est le suivant :

Jetons ensuite un coup d'œil à un exemple de rectangle non rempli dessiné à l'aide de la méthode Strokerect() dans Canvas. Le rectangle dessiné sur le canevas par la méthode

StrokeRect() sera tracé avec la couleur spécifiée. La couleur du trait est spécifiée via la propriété StrokeStyle.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用canvas画矩形</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
  function draw(id){
      var canvas = document.getElementById(id);
      var context = canvas.getContext(&#39;2d&#39;);  //getContext() 方法可返回一个对象
      context.strokeStyle = "pink";  //图形边框的填充颜色
      context.lineWidth = 5;  //用宽度为 5 像素的线条来绘制矩形：     
      context.strokeRect(50,50,180,120);  //绘制矩形（无填充）
      context.strokeRect(110,110,180,120);      
 }
 draw("canvas");
</script>
</body>
</html>

L'effet du dessin d'un rectangle non rempli sur toile est le suivant :

Comment dessiner un rectangle avec de la toile ? Introduction à deux méthodes pour dessiner des rectangles sur toile

Enfin, cet article se termine ici, à propos Pour plus d'informations sur Canvas, veuillez vous référer au Manuel de développement HTML5.

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!

JavaScript html5 canvas

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

Article précédent：Comment dessiner une horloge sur toile ? Le processus de mise en œuvre du dessin d'une horloge annulaire sur toileArticle suivant：Comment dessiner une horloge sur toile ? Le processus de mise en œuvre du dessin d'une horloge annulaire sur toile

Articles Liés

Voir plus