Comment utiliser la méthode fillRect-Tutoriel H5-php.cn

Comment utiliser la méthode fillRect

不言

Libérer： 2022-04-06 19:09:39

original

12856 Les gens l'ont consulté

La méthode fillRect est utilisée pour dessiner un rectangle rempli sur le canevas. La syntaxe est "context.fillRect(x,y,width,height);" parmi eux, les paramètres "x" et "y". " représentent le coin supérieur gauche du rectangle. Les coordonnées x et y des coins, " largeur " et " hauteur " représentent la largeur et la hauteur du rectangle.

Comment utiliser la méthode fillRect

L'environnement d'exploitation de cet article : système Windows 7, ordinateur Dell G3, version HTML5&&CSS3.

fillRect est une méthode en HTML5 qui peut être utilisée pour dessiner un rectangle rempli sur le canevas. La couleur de remplissage par défaut est le noir. Jetons un coup d'œil à l'utilisation spécifique de la méthode fillRect.

Jetons d'abord un coup d'œil à la syntaxe de base de fillRect

context.fillRect(x,y,width,height);

Copier après la connexion

x représente la coordonnée x du coin supérieur gauche du rectangle.

y représente la coordonnée y du coin supérieur gauche du rectangle.

width représente la largeur du rectangle.

hauteur représente la hauteur du rectangle.

(Référence : Canevas HTML5)

Regardons un exemple spécifique

Le code est le suivant

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    <canvas id="rectangle" width="200" height="200"></canvas>
    <script>
    // 使用JS获取canvas元素
        var canvas=document.getElementById(&#39;rectangle&#39;);
        // 获取canvas
        var c=canvas.getContext(&#39;2d&#39;);
        // 在画布上绘制一个矩形
        c.fillRect(50,50,100,100);
    </script>
</body>
</html>

Copier après la connexion

L'effet est le suivant : Dessinez un rectangle rempli de noir

Comment utiliser la méthode fillRect

Cet article se termine ici Pour un contenu plus passionnant sur le front-end, vous pouvez faire attention à d'autres colonnes connexes de. le tutoriel du site PHP chinois ! ! !

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!