5、canvas 渐变填充色_canvas 渐变填空

作者：黑客灵魂 | 2024-08-10 23:23:49

踩

canvas 渐变填空

渐变填充色，包含至少两种颜色。图形的一部分以一种颜色开始，然后渐渐地变成另一种颜色，在其变化过程中，会经历一种或多种预定义的颜色。

canvas 支持两种渐变填充：线性渐变或放射性渐变。

线性渐变填充：渐变色在一条直线上从一个点延伸到另一个点。使用 context.createLinearGradient( x1, y1, x2, y2 ) 方法将沿着点（x1, y1）与点（x2, y2）之间的直线填充渐变色。

放射性渐变填充：从你指定的空间的中心开始向各个方向扩散，从而创建出一个圆形。渐变从圆心开始到圆的边缘结束。

context.createRadialGradient( x1, y1, r1, x2, y2, r2 ) 方法以两个圆形作为参数，每个圆形由其圆心坐标和半径指定。

为了实现渐变填充，在渐变过程中，需要至少两种不同的颜色。在仅有两种颜色的情况下，填充的图形会从第一种颜色慢慢地变成第二种颜色。

如果加入更多的中间颜色，填充的图形就会自然地从第一种颜色变到第二种颜色，再到第三种颜色，以此类推，直到变成最终的颜色。

在设置颜色的同时，还需为每种颜色指定它们的位置，该值是介于 0 ~ 1 之间的小数，称为填充的比例。

比如，在两种颜色的填充中，分别指定0和1作为比例。

而在一个等距的三色渐变中则会使用 0、0.5 与 1 作为填充比例，0.5 表示第二种颜色恰好位于第一种颜色和最后一种颜色的中间位置。如果填充比例设置为 0、0.1 与 1的话，第一种颜色就会很快变为第二种颜色，再慢慢变成最后一种颜色。这里的数值不是表示像素值，而是与 1 的比率。

以颜色和比例值作为参数，可以使用 Gradient 对象的 Gradient.addColorStop( ratio, color ) 方法为渐变色添加颜色：


let gradient = context.createLinearGradient(0, 0, 100, 100);
gradient.addColorStop(0, "#ffffff");
gradient.addColorStop(1, "#ff0000");

以上代码在点（0,0）至点（100,100）之间创建一种线性渐变色，并定义两种颜色以及各自的比例，该渐变色将从白色渐变为红色。

然后将该渐变色赋值给 context.fillStyle 属性，并使用它绘制一个图形：


context.fillStyle = gradient;
context.fillRect(0, 0, 100, 100);

下面代码实现线性渐变和放射性渐变如下：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width">
    <title></title>
    <style>
        *{margin: 0;padding: 0}
    </style>
</head>
<body>
    <canvas id="myCanvas" width="600" height="400">
        Your browser does not support HTML5 Canvas.
    </canvas>
 
    <script>
        (function(){
            window.addEventListener("load", eventWindowLoaded, false);
            function eventWindowLoaded(){
                canvasApp();
            }
            function canvasSupport(e){
                return !!e.getContext;
            }
            function canvasApp(){
                var myCanvas = document.getElementById("myCanvas");
                if(!canvasSupport(myCanvas)){
                    return ;
                }
                // start
                var context = myCanvas.getContext("2d");
                drawScreen(myCanvas, context);
            }
 
            // write your codes
            function drawScreen(myCanvas, context){
 
                // 线性渐变填充
                let pt1 = {
                    x: 10,
                    y: 10
                };
                let pt2 = {
                    x: 100,
                    y: 100
                };
                let gradient = context.createLinearGradient(pt1.x, pt1.y, pt2.x, pt2.y);
                gradient.addColorStop(0, "#ffffff");
                gradient.addColorStop(0.3, "#0000ff");
                gradient.addColorStop(1, "#ff0000");
                context.fillStyle = gradient;
                context.fillRect(pt1.x, pt1.y, pt2.x, pt2.y);
 
                // 放射性渐变填充
                let c1 = {
                    x: 200,
                    y: 60,
                    radius: 0
                };
                let c2 = {
                    x: 200,
                    y: 60,
                    radius: 50
                };
 
                let gradient2 = context.createRadialGradient(c1.x, c1.y, c1.radius, c2.x, c2.y, c2.radius);
                gradient2.addColorStop(0, "#ffffff");
                gradient2.addColorStop(0.3, "#0000ff");
                gradient2.addColorStop(1, "#ff0000");
                context.fillStyle = gradient2;
                context.fillRect(c1.x - c2.radius, c2.y - c2.radius, c2.radius * 2, c2.radius * 2);
 
            }
        })();
    </script>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/960962