fillrect 方法
fillRect 是 HTML5 Canvas 2D API 中一个重要的绘图方法，用于在画布上绘制一个填充了指定颜色的矩形，该方法接受四个参数：矩形左上角的 x 坐标、y 坐标、矩形的宽度和高度，使用这个方法可以快速地在画布上创建图形元素，如背景、边框或其他视觉元素。
语法
context.fillRect(x, y, width, height);
context 是一个 CanvasRenderingContext2D 对象，通常从<canvas> 元素的getContext('2d') 方法获得。
参数说明
x：矩形左上角的 x 坐标。
y：矩形左上角的 y 坐标。
width：矩形的宽度。
height：矩形的高度。
使用示例
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000"; // 设置填充颜色为红色
ctx.fillRect(20, 20, 150, 100); // 在(20,20)位置绘制一个宽150高100的矩形
</script>
</body>
</html> 在这个例子中，我们首先获取了一个<canvas> 元素的引用，并从中获取了 2D 渲染上下文，然后设置了fillStyle 属性来定义填充颜色，最后调用fillRect 方法绘制了一个红色的矩形。
高级技巧
除了基本的矩形绘制，fillRect 还可以结合变换（如旋转、缩放和平移）来创建复杂的图形效果，可以先对画布应用变换，然后再调用fillRect 方法。
// 先平移画布原点，然后绘制矩形 ctx.translate(70, 70); ctx.fillRect(0, 0, 50, 50);
性能考虑
虽然fillRect 方法简单易用，但在高性能要求的场合下，频繁调用fillRect 可能导致性能下降，在这种情况下，可以考虑使用像素操作或者 WebGL 来提高性能。
相关问答 FAQs
Q1:fillRect 与strokeRect 有什么区别？
A1:fillRect 用于绘制填充的矩形，而strokeRect 用于绘制只有边框没有填充的矩形，两者的参数相同，但strokeRect 会根据当前的描边样式 (strokeStyle) 来绘制矩形边框。
Q2:fillRect 能否用来绘制圆形或椭圆形？
A2:fillRect 只能直接绘制矩形，要绘制圆形或椭圆形，需要使用其他方法，比如arc 或ellipse，并且调用fill 方法来进行填充。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/922579.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复