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>