canvas渐变 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{background: black;}
            #c1{background: wheat;}
        </style>
        <script>
            window.onload=function(){
            
                    var oc=document.getElementById('c1');
                    var gc=oc.getContext('2d');
                     //creatLinearGradient(x1,y1,x2,y2)线性渐变
                     //参数表示起点坐标和终点坐标
                     //addColorStop(位置,颜色)添加渐变点，方法如下
                    
                    
                    
                    /*
                        var obj=gc.createLinearGradient(150,100,150,200);
                        obj.addColorStop(0,'red');//颜色起点
                        obj.addColorStop(1,'blue');//颜色终点
                        gc.fillStyle=obj;
                        gc.fillRect(150,100,100,100);
                        */
                    //createRadialGradient(x1,y1,r1,x2,y2,r2)放射渐变
                    //参数表示第一个圆的坐标和半径，第二个圆的坐标和半径

                     
                
                    var obj=gc.createRadialGradient(200,200,100,200,200,150);
                    obj.addColorStop(0,'red');//颜色起点
                    obj.addColorStop(0.5,'yellow')
                    obj.addColorStop(1,'blue');//颜色终点
                    gc.fillStyle=obj;
                    gc.fillRect(0,0,oc.width,oc.height);
                    
                    
                    
            };
        </script>
    </head>
    <body>
     <canvas id="c1" width="800" height="800"></canvas>
    </body>
</html>

效果图：

 

 

posted @ 2018-12-02 15:57  A-zero  阅读(163)  评论(0)    收藏  举报