案例2：fillRect()绘制矩形 · canvas基本功能

# 案例2：fillRect()绘制矩形 ![](https://img.kancloud.cn/97/18/9718179c7dc1e9c62a995a4152994d84_236x160.png) 相关代码如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <canvas id="myCanvas" width="300" height="400"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c = document.getElementById('myCanvas'); var ctx = c.getContext("2d"); ctx.fillRect(20, 20, 150, 100); //绘制矩形并填充 </script> </body> </html> ~~~ >fillRect()语法： context.fillRect(x, y, width, height); 可以用 `fillStyle` 属性来设置用于填充绘图的颜色、渐变或模式。