画布 fillRect() 方法
HTML 画布的 fillRect() 方法被用于在 web 页面上创建一个填色矩形。默认颜色是黑色。<canvas> 元素 允许你使用 JavaScript 在网页上绘制图形。每个画布有两种元素来分别描述画布的高度和宽度,即高度和宽度。
以下是语法 −
context.fillRect(p,q,width,height);
同上,
- p:矩形左上角的 x 坐标
- q:矩形左上角的 y 坐标
- width:矩形的宽度
- height:矩形的高度
下面我们来看一个例子来实现画布的 fillRect() 方法−
例子
<!DOCTYPE html> <html> <body> <canvas id="newCanvas" width="500" height="350" style="border:2px solid orange;"> </canvas> <script> var c = document.getElementById("newCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, 500, 350); ctx.clearRect(250, 100, 50, 100); </script> </body> </html>
输出
广告