用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画布背景色发生了改变。
<style type="text/css">.linear{
width:100%
height:600px
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red)/*IE 6 7 8*/
background: -ms-linear-gradient(top, #fff, #0000ff) /* IE 10 */
background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8)/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8))/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff)) /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #fff, #0000ff) /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #fff, #0000ff) /*Opera 11.10+*/
}
</style>
<body>
<div class="linear"></div>
</body>
google模式下：
ie模式下：
火狐模式下：
FILTER（ie模式）；background:-moz-linear-gradient（火狐模式）；background:-webkit-gradient（谷歌模式）。
以上是为了区别不同浏览器的不同效果，我把色码区别开了。为了兼容所有浏览器的相同效果的css3渐变色，你可以把色码调试成一样。
这有个问题。首先用最单的办法是用CSS3 background-color:rgba(0,0,0,0.5)但这个兼容性你懂的。第二种就是他们说的这样了。这会让里面的文字一起透明。所以。办法是用两个层叠起来。
