Canvas如何设置一个渐变背景（支持从纯色切换到渐变，从渐变又切换到纯色)

Canvas如何设置一个渐变背景（支持从纯色切换到渐变，从渐变又切换到纯色)

Canvas背景设置

在开发中遇到一个需求：点击按钮切换canvas的背景，要求是从纯色到渐变，渐变到纯色。开发的时候发现初始设置为渐变是有效的，但是从纯色切换到渐变的时候，canvas的背景是没有反应的。纠结了好久，最后将纯色也设置为渐变（从黑色渐变到黑色，从白色渐变到白色）
1.在css中声明background背景（将纯色也设置为渐变的类型，但是是从纯色渐变到纯色。如下：）

CSS代码

canvas {
   
    /*FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red); !*IE 6 7 8*!*/

    /*background: url("../images/back_img_2.png") no-repeat -100px -960px;*/
    /*background-size: 100%;*/


    background: -ms-linear-gradient(top, #ffffff, #000000); /* IE 10 */

    background: -moz-linear-gradient(top, #ffffff, #000000); /*火狐*/

    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#000000)); /*谷歌*/

    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#