Explication détaillée de l'exemple de code pour dessiner un rectangle dans le dessin de base du canevas HTML5

3856173a0eceb679792f65a38e1fcb00c2caaf3fc160dd2513ce82f021917f8b est une nouvelle balise en HTML5, qui est utilisée pour dessiner des graphiques. Cet article s'adresse principalement à tout le monde. introduction à la méthode de base de dessin pour dessiner un rectangle dans un canevas HTML5. Les amis intéressés peuvent se référer à

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8bC'est juste un The. conteneur pour dessiner des graphiques, en plus des attributs tels que id, class, style, etc., a également des attributs hauteur et largeur . Il y a trois étapes principales pour dessiner sur l'élément 5ba626b379994d53f7acf72a64f9b697> :

1. Récupérez l'

objet DOM correspondant à l'élément 5ba626b379994d53f7acf72a64f9b697 2. Appelez la méthode getContext() de l'objet Canvas pour obtenir un objet CanvasRenderingContext2D
3. Appelez l'objet CanvasRenderingContext2D pour le dessin.

Dessiner des rectangles rect(), fillRect() et StrokeRect()

•context.rect( x , y , width , height ) : définit uniquement le chemin de le rectangle ;

•context.fillRect( x , y , width , height ) : dessine directement un rectangle rempli ;
•context.strokeRect( x , y , width , height ) : dessine directement une bordure rectangulaire ; 🎜 >

JavaScript Code复制内容到剪贴板
<script type="text/javascript">   
    var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
  
    //使用rect方法   
    context.rect(10,10,190,190);   
    context.lineWidth = 2;   
    context.fillStyle = "#3EE4CB";   
    context.strokeStyle = "#F5270B";   
    context.fill();   
    context.stroke();   
  
    //使用fillRect方法   
    context.fillStyle = "#1424DE";   
    context.fillRect(210,10,190,190);   
  
    //使用strokeRect方法   
    context.strokeStyle = "#F5270B";   
    context.strokeRect(410,10,190,190);   
  
    //同时使用strokeRect方法和fillRect方法   
    context.fillStyle = "#1424DE";   
    context.strokeStyle = "#F5270B";   
    context.strokeRect(610,10,190,190);   
    context.fillRect(610,10,190,190);   
</script>

Deux points doivent être expliqués ici : Le premier point est l'ordre avant et après que Stroke() et Fill() soient dessinés. ) est dessiné plus tard, puis lorsque la bordure du trait est plus grande, elle couvrira évidemment la moitié de la bordure dessinée par Stroke(); deuxième point : lors de la définition de l'attribut fillStyle ou StrokeStyle, vous pouvez utiliser la méthode de définition de "rgba(255). ,0,0,0.2)" Paramètres, le dernier paramètre de ce paramètre est la transparence.

Il y en a un autre lié au dessin rectangulaire : effacer la zone rectangulaire : contexte.

clear

Rect(x,y,width,height). Les paramètres reçus sont : effacer la position de départ du rectangle ainsi que la largeur et la longueur du rectangle. Dans le code ci-dessus, ajoutez à la fin du dessin les graphiques :

context.clearRect(100,60,600,100);

pour obtenir l'effet suivant :

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!