canvas-3radialGradient.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid;">
        The current browser does not support Canvas, can replace the browser a try!
    </canvas>

    <script>

        window.onload = function(){
            var canvas = document.getElementById('canvas');

            canvas.width = 800;
            canvas.height = 800;

            if(canvas.getContext('2d')){
                var context = canvas.getContext('2d');

                // begin
                var radialGrad = context.createRadialGradient(400,400,0,400,400,500);
                radialGrad.addColorStop(0.0,'white');
                radialGrad.addColorStop(0.25,'yellow');
                radialGrad.addColorStop(0.5,'green');
                radialGrad.addColorStop(0.75,'blue');
                radialGrad.addColorStop(1.0,'black');
                context.fillStyle = radialGrad;
                context.fillRect(0,0,800,800)

            }else{
                alert('当前游览器不支持Canvas，请更换游览器后再试！');
            }
        }
    </script>
</body>
<script>
    /*总结
    step 1
        // 内圆的圆心（x0,y0） 内圆半径r0
        var grd = context.creatRadialGradient(x0,y0,r0,x1,x1,r1)
    step 2
        //stop的值域[0,1]
        grd.addColorStop(stop,color)
    */
</script>
</html>

 

posted @ 2015-11-20 17:51  Cynthia娆墨旧染  阅读(386)  评论(0)    收藏  举报