在使用HTML5中的新特性canvas时，可以使用fillRect方法绘制矩形，对应方法的参数为x、y、width和height，还可以给矩形填充颜色。
工具/原料
1
HTML5
2
canvas
3
CSS3
4
HBuilderX
5
浏览器
6
截图工具
7
PPT2019
方法/步骤
2
创建完毕项目，打开项目根目录index.html文件，在主体元素中添加canvas标签，并设置id属性值
3
接着在title标签下方，添加一个style标签，设置整体样式属性和canvas画布的样式
4
调用window.onload函数，编写生成矩形的方法代码，然后保存
5
保存代码并打开浏览器预览效果，可以看到在一个矩形框右下角生成一个矩形
6
再修改代码，给矩形添加渐变色，并调用fillStyle方法
7
再次保存代码并查看效果，可以发现矩形颜色发生了变化
总结
1、新建Web项目2、添加画布元素3、设置画布样式4、创建矩形代码END
注意事项
1
注意canvas画布的用法
2
注意如何使用canvas方法绘制矩形
下一篇：提高网站性能和速度的方法