技術標籤：css3chromejavascript

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(#000000)); /* Safari 4-5, Chrome 1-9*/

    background: -webkit-linear-gradient(top, #ffffff, #000000); /*Safari5.1 Chrome 10+*/

    background: -o-linear-gradient(top, #ffffff, #000000); /*Opera 11.10+*/
}
.canvas3{
    
    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(#000000)); /* Safari 4-5, Chrome 1-9*/

    background: -webkit-linear-gradient(top, #ffffff, #000000); /*Safari5.1 Chrome 10+*/

    background: -o-linear-gradient(top, #ffffff, #000000); /*Opera 11.10+*/
    
}
.canvas2{
    background: -ms-linear-gradient(top, #ffffff, #ffffff); /* IE 10 */

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

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

    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#ffffff)); /* Safari 4-5, Chrome 1-9*/

    background: -webkit-linear-gradient(top, #ffffff, #ffffff); /*Safari5.1 Chrome 10+*/

    background: -o-linear-gradient(top, #ffffff, #ffffff); /*Opera 11.10+*/
}
.canvas1{
    background: -ms-linear-gradient(top, #000000, #000000); /* IE 10 */

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

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

    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#000000)); /* Safari 4-5, Chrome 1-9*/

    background: -webkit-linear-gradient(top, #000000, #000000); /*Safari5.1 Chrome 10+*/

    background: -o-linear-gradient(top, #000000, #000000); /*Opera 11.10+*/
}
;

2.事件發生時根據判斷條件在jquary中給canvas新增不同的類。

        $('canvas').removeClass('canvas3')
        $('canvas').addClass('canvas1')