Maison > Article > interface Web > Comment utiliser la méthode fillRect
Comment utiliser la méthode fillRect
- 不言original
- 2019-02-11 17:21:0912881parcourir
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.
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);
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('rectangle');
// 获取canvas
var c=canvas.getContext('2d');
// 在画布上绘制一个矩形
c.fillRect(50,50,100,100);
</script>
</body>
</html>L'effet est le suivant : Dessinez un rectangle rempli de noir
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!