HTML5动画----canvas基础6（1绘制渐变）

线性渐变：ctx.createLinearGradient(x1,y1,x2,y2);

    <script type="text/javascript">

//1.线性渐变：lineargradient=ctx.createLinearGradient(x1,y1,x2,y2); x1,y1为线性渐变的起点，x2,y2为线性渐变的终点

  //   lineargradient.addColorStop(position,color); //定义色标的位置并上色

        function draw(){    

            var ctx=document.getElementById("myCanvas").getContext('2d');

            var lingrad=ctx.createLinearGradient(0,0,0,200);

            lingrad.addColorStop(1/7,'#ff9900');

            lingrad.addColorStop(2/7,'#ffff00');

            lingrad.addColorStop(3/7,'#00ff00');

            lingrad.addColorStop(4/7,'#00ffff');

            lingrad.addColorStop(5/7,"#0000ff");

            lingrad.addColorStop(6/7,'#ff00ff');

            lingrad.addColorStop(7/7,'#ff0000');

            ctx.fillStyle=lingrad;

            ctx.strokeStyle=lingrad;

            ctx.fillRect(10,10,200,200);

        }

window.οnlοad=function(){

            draw();

        }

        </script>

        <canvas id="myCanvas" width="300" height="240"></canvas>

 径向渐变：ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)

 <script type="text/javascript">

//1.径向渐变：radialgradient=ctx.createRadialGradient(x1,y1,r1,x2,y2,r2); x1,y1为圆心，r1为半径，x2,y2为圆心，r2为半径

 //  radialgradient.addColorStop(position,color); //定义色标的位置并上色

            function draw(){    

            var ctx=document.getElementById("myCanvas").getContext('2d');

            var radgrad=ctx.createRadialGradient(55,55,20,100,100,90);

            radgrad.addColorStop(0,'#ffffff');

            radgrad.addColorStop(0.75,'#333333');

            radgrad.addColorStop(1,'#000000');

            ctx.fillStyle=radgrad;

            ctx.fillRect(10,10,200,200);

        }

        window.οnlοad=function(){

            draw();

        }

        </script>

        <canvas id="myCanvas" width="300" height="240"></canvas>