HOWTO · JavaScript
JavaScript 中的 fillRect() 函数
本文将帮助你了解 JavaScript 中 fillRect 方法的工作原理。
本页内容
在本文中，你将学习如何使用 JavaScript fillRect() 函数在画布上创建具有定义宽度和高度的矩形。
在 JavaScript 中使用 fillRect() 函数
HTML 画布的 fillRect() 函数在网页上生成一个填充矩形。黑色 是默认颜色。使用 JavaScript，你可以使用 canvas 元素在网页上绘制图片。
每个画布包含两个组件，分别指示其高度和宽度、高度和宽度。
语法：
obj.fillRect(a, b, width, height);
a 是 Rectangle 起点的 x 轴位置，b 是 Rectangle 起点的 y 轴位置。width 是矩形的宽度，可以是正数也可以是负数，其中正值显示在右侧，而负值显示在左侧。
height 是 Rectangle 的高度，它也可以是正数或负数。正值在减少，而负值在增加。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fillRect</title>
</head>
<body>
<h1>fillRect canvas JavaScript</h1>
<canvas id="canvas" height="300" width="300">
</canvas>
</body>
<script>
function drRect() {
const canva = document.querySelector('#canvas');
if (!canva.getContext) {
return;
}
const rect = canva.getContext('2d');
rect.fillStyle = '#800080';
rect.fillRect(50, 50, 200, 250);
}
drRect();
</script>
</html>
使用 document.querySelector() 方法选择画布元素。确定浏览器是否支持画布 API。
获取 2D 绘图上下文对象。将填充样式更改为 #800080，紫色颜色并使用 fillRect() 函数绘制矩形。
矩形的宽度为 200 像素，高度为 250 像素，从 (50, 50) 开始。
输出：
