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

17294 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

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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