用css3可以直接用图片作为背景就可以了，不需要用js。解决方法如下：
1、双击打开HBuilderX开发工具，在Web项目中新建静态页面canvas.html。
2、打开已新建的canvas.html文件，修改title标签里的文字内容。
3、在<body></body>标签内，插入一个canvas标签，并设置id属性值。
4、在canvas标签下，添加script标签并初始化canvas对象，调用自带的方法。
5、保存代码并运行项目，打开浏览器查看界面效果，可以发现绘制了一条线。
6、在style标签中，利用ID选择器设置canvas样式，添加背景色设置。
7、再次保存代码文件，并刷新浏览器，可以看到canvas画布背景色发生了改变。
H5的新特性：
1. 用于绘画 canvas 元素。
2. 用于媒介回放的 video 和 audio 元素。
3. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除。
4. 语意化更好的内容元素，比如 article、footer、header、nav、section。
5. 表单控件，calendar、date、time、email、url、search。
css3的新特征:
选择器。
2.和透明度。
3. 多栏布局。
4. 多背景图。
5.Word Wrap。
6. 文字阴影。
7.@font-face属性。
8.圆角(边框半径)。
9.边框图片。
10.盒阴影。
11. 盒子大小。
12. 媒体查询。
13.语音。
Time: 20200131
绘制图形的套路就是，先拆分，然后再画基本的元素，考虑如何用旋转，变形完成。
最基础的就是如何绘制三角形，这也是相对来说比较难的一个点。
拆分为一个三角形和一个梯形。
梯形还可以再拆分，但是我们可以直接画出梯形来。
拆分为三角形 + 正方形 + 三角形。
总之，用CSS3画了这么一堆东西，都是在练习使用拆解 + 基本元素绘制，变形，旋转，位置设定，伪元素等综合使用。
显示效果：
END.
