canvas-3radialGradient.html

最新推荐文章于 2024-06-02 15:15:42 发布

weixin_33720956

最新推荐文章于 2024-06-02 15:15:42 发布

阅读量72

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cynthia-wuqian/p/4981642.html

本文演示如何在HTML中利用Canvas元素实现圆形彩色渐变填充效果，通过创建径向渐变并设置颜色停靠点来创建美观的视觉效果。

<!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>