HTML canvas fillRect实例讲解

发布时间：2025-12-09 11:46:09 浏览次数：1

fillRect()方法用于使用给定的颜色填充矩形。 fillRect()方法的默认颜色是黑色。

用法:

context.fillRect( x, y, width, height )

参数:该方法接受上述和以下所述的四个参数:

x:它存储矩形左上角的x坐标。
y:它存储矩形左上角的y坐标。
width:它以像素为单位存储宽度。
height:它以像素为单位存储高度。

范例1:本示例使用fillRect()方法创建矩形并用默认颜色(黑色)填充。

<!DOCTYPE html> <html> <head>     <title>         HTML canvas fillRect() Method     </title> </head> <body>     <canvas  width="500" height="300"></canvas>           <script>         var x = document.getElementById("GFG");         var contex = x.getContext("2d");         contex.fillRect(50, 50, 350, 200);         contex.stroke();     </script>    </body> </html>

输出:

范例2:本示例使用fillRect()方法创建矩形并用ve颜色(绿色)填充。

<!DOCTYPE html> <html> <head>     <title>         HTML canvas fillRect() Method     </title> </head> <body>     <canvas  width="500" height="300"></canvas>           <script>         var x = document.getElementById("GFG");         var contex = x.getContext("2d");         contex.fillStyle = "green";         contex.fillRect(50, 50, 350, 200);         contex.stroke();     </script>    </body> </html>

输出:

支持的浏览器:下面列出了fillRect()方法支持的浏览器:

谷歌浏览器
Internet Explorer 9.0
火狐浏览器
苹果浏览器
Opera

fillrect

上一篇：echarts中国地图3D各个城市标点demo 下一篇：C# Graphics.DrawLine函数实例讲解

知识问答

HTML canvas fillRect实例讲解

综合百科

网站导航