Comment dessiner un rectangle avec de la toile ? Introduction à deux méthodes pour dessiner des rectangles sur toile-Tutoriel H5-php.cn

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

不言

Libérer： 2018-09-17 13:43:45

original

17341 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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