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) 开始。
输出：
相关文章
在 JavaScript 中隐藏表格行
发布时间：2024/03/18 浏览次数：184 分类：JavaScript
-
JavaScript 不一定有任何可以直接隐藏表格内容的预定义函数。更准确地说，有 jQuery 的 toggle() 函数和 hide()、show() 函数，它们依次执行以按下行并展开它们。
JavaScript 表格滚动
发布时间：2024/03/18 浏览次数：139 分类：JavaScript
-
要在网页中滚动表格内容，我们可以依赖一些 JavaScript 属性来依次执行任务。overflow、overflowX 和 overflowY 的使用使表格可滚动且可访问。
用 JavaScript 检查按钮是否被点击
发布时间：2024/03/18 浏览次数：147 分类：JavaScript
-
使用 JavaScript 检查按钮是否被点击可以通过三种方法进行。在 HTML 中添加 onclick 属性，将脚本标签中的 onclick 初始化为方法，使用 EventListener 可能是更好的方法。
JavaScript 更改按钮文本
发布时间：2024/03/18 浏览次数：128 分类：JavaScript
-
本教程展示了如何使用 JavaScript 更改按钮文本，并演示了使用 jQuery 更改按钮文本。
