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

Zho-J

于 2021-01-05 09:20:10 发布

阅读量2.4k

点赞数

文章标签： css3 chrome javascript

本文链接：https://blog.csdn.net/weixin_42225218/article/details/112212662

版权

在Canvas开发中，实现从纯色到渐变背景及从渐变到纯色背景的切换是一个挑战。当从纯色切换到渐变时，直接设置渐变可能无效。解决方法是将纯色也定义为一种特殊的渐变，例如从同色到同色的渐变。通过CSS预定义渐变背景，并在JavaScript中动态切换canvas的类来改变背景样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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(#

最低0.47元/天解锁文章