HTML5-画布（canvas）效果之-渐变色

最新推荐文章于 2022-09-02 09:42:25 发布

前端老码农

最新推荐文章于 2022-09-02 09:42:25 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=ji1caai1j&title=HTML5-%E7%94%BB%E5%B8%83%EF%BC%88canvas%EF%BC%89%E6%95%88%E6%9E%9C%E4%B9%8B-%E6%B8%90%E5%8F%98%E8%89%B2

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

                        
                     
 <!DOCTYPE HTML>
<html>
<head>
    <title>渐变色</title>
</head>
<body>
    <canvas id="canvas" width="200" height="100" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

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

        function drawIt() {

            clearIt();

            /*
             * context.createLinearGradient(xStart, yStart, xEnd, yEnd) - 创建线性渐变对象，并返回 CanvasGradient 类型的对象
             *   xStart, yStart - 线性渐变对象的起始点坐标
             *   xEnd, yEnd - 线性渐变对象的结束点坐标
             *
             * CanvasGradient.addColorStop(offset, color) - 新增一个渐变参考点
             *   offset - 渐变参考点的位置，0.0 - 1.0 之间。起始点为 0，结束点为 1
             *   color - 渐变参考点的颜色值 
             */
            var linearGradient = ctx.createLinearGradient(50, 0, 50, 100);
            linearGradient.addColorStop(0, "red");
            linearGradient.addColorStop(0.5, "green");
            linearGradient.addColorStop(1, "blue");

            ctx.beginPath();
            ctx.arc(50, 50, 50, 0, 2 * Math.PI, true);
            ctx.fillStyle = linearGradient;
            ctx.fill();


            /*
             * context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) - 创建放射性渐变对象，并返回 CanvasGradient 
             *   xStart, yStart - 放射性渐变对象的开始圆的圆心坐标
             *   radiusStart - 开始圆的半径
             *   xEnd, yEnd - 放射性渐变对象的结束圆的圆心坐标
             *   radiusEnd - 结束圆的半径
             */
            var radialGradient = ctx.createRadialGradient(150, 50, 0, 150, 50, 50);
            radialGradient.addColorStop(0, "red");
            radialGradient.addColorStop(0.5, "green");
            radialGradient.addColorStop(1, "blue");

            ctx.beginPath();
            ctx.arc(150, 50, 50, 0, 2 * Math.PI, true);
            ctx.fillStyle = radialGradient;
            ctx.fill();
        }

        function clearIt() {
            ctx.clearRect(0, 0, 200, 100);
        }

    </script>
</body>
</html> 

前端老码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML5-画布（canvas）效果之-渐变色

<!DOCTYPE HTML> <html> <head> <title>渐变色</title> </head> <body> <canvas id="canvas" width="2...
复制链接

扫一扫

专栏目录