Canvas渐变

在HTML中，渐变可以简单地定义为从一种颜色变化到另一种颜色的模式。渐变色是由不同的颜色进行过渡，而不是单一的颜色。

HTML中的canvas渐变是可用于填充和绘制形状（如矩形、圆形、三角形、文本、线条等）的颜色模式。在画布上，形状不限于纯色。

canvas接口有两种生成渐变对象的方法，它通过以下方法返回：

  • ctx.createLinearGradient(x1, y1, x2, y2),线性渐变。
  • ctx.createRadialGradient(x1, y1, r1, x2, y2, r2),径向渐变。

canvas渐变

在渐变对象的基础上添加colorStop,这个方法叫addColorStop(stop,color)。他有两个参数分别为stop,color。第一个参数是一个浮点值用来决定关键色的位置。第二个参数是用来决定关键色的颜色。

方法: createLinearGradient(x1, y1, x2, y2)

线性渐变以线性的模式来改变颜色，此方法返回一个CanvasGradient对象，该对象表示一个线性渐变，该渐变沿由参数表示的坐标给定的直线改变颜色。可以使用2d 上下文函数createLinearGradient()创建线性渐变。该函数包含4个参数，即x1、y1、x2、y2，定义了2个点,它们决定渐变图案的方向和延伸。渐变位于起始坐标（x1，y1）和结束坐标（x2，y2）之间。

有三种类型的线性渐变:

  • 水平渐变只能通过使用或改变x轴上的参数值来创建，即（x1，x2）。

    水平渐变

  • 垂直渐变只能通过使用或改变y轴上的参数值来创建，即（y1，y2）。

    垂直渐变

  • 对角线渐变可以通过使用或改变x轴（即x1，x2）和y轴（即y1，y2）上的参数值来创建。

    对角渐变

样式属性

对于渐变样式，有两个样式属性可用于渐变对象绘制不同的形状，如三角形、矩形、圆形等。

样式属性

渐变描边示例
<html>
<head>

<script>

function drawShape(){

    var canvas = document.getElementById('CanvasGradient');

    if (canvas.getContext){

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

        var lgrad2 = ctx.createLinearGradient(0, 50, 0, 100);

        lgrad2.addColorStop(0, 'blue');
        lgrad2.addColorStop(0.5, 'purple');

        lgrad2.addColorStop(1, 'red');

        ctx.strokeStyle = lgrad2;

        ctx.strokeRect(10, 40, 100, 100);

    } else {

       alert('浏览器不支持canvas');

    }

}

</script>

</head>

<body onload="drawShape();">

   <canvas id="CanvasGradient" width="250" height="150" ></canvas>

</body>

</body>

</html>

效果如下:

渐变描边

渐变填充示例
<html>

<body>

<canvas id="CanvasGradient" width="250" height="150" style="border:3px solid grey;"></canvas>

<script>

        var canvas = document.getElementById('CanvasGradient');

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

        context.rect(5, 5, 240, 140);

        // 添加线性渐变

        var lgrd = context.createLinearGradient(0, 0, 200, 0);

        lgrd.addColorStop(1, 'skyblue');
        lgrd.addColorStop(0.6, 'purple');
        lgrd.addColorStop(0, 'green');

        context.fillStyle = lgrd;

        context.fill();

</script>

</body>

</html>

效果如下:

渐变填充

线性渐变的另一个例子,同时包括“填充”和“描边样式”。
<html>

<head>

<script>

function drawShape(){

                // 得到canvas元素
                var canvas = document.getElementById('canvasGradient');

                if (canvas.getContext){

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

                         // 创建2个线性渐变

                        var lgrad1 = ctx.createLinearGradient(0, 0, 0 ,150);

                        lgrad1.addColorStop(0, 'blue');

                        lgrad1.addColorStop(0.25, 'skyblue');

                        lgrad1.addColorStop(0.75, 'lightgreen');

                        lgrad1.addColorStop(1, 'green');

                         
                        var lgrad2 = ctx.createLinearGradient(0, 50, 0, 100);

                        lgrad2.addColorStop(0, 'blue');

                        lgrad2.addColorStop(1, 'green');

                         // 将线性渐变对象分配给填充和描边

                        ctx.fillStyle = lgrad1;

                        ctx.strokeStyle = lgrad2;

                        // draw shapes

                        ctx.fillRect(75, 5, 220, 140);

                        ctx.strokeRect(20, 50, 100, 50);

                } else {

                        alert('你的浏览器不支持canvas');

                }

}

</script>

</head>

<body onload="drawShape();">

<canvas id="canvasGradient" style="border:3px solid grey;"></canvas>

</body>

</html>

效果如下:

canvas教程

方法：createRadialGradient（x1，y1，r1，x2，y2，r2）, 创建径向渐变

创建径向渐变。参数表示两个圆，一个圆心在（x1，y1），半径为r1，另一个圆心在（x2，y2），半径为r2。与线性渐变的区别是，径向渐变定义的是一个放射状的渐变。而这个放射状的渐变是定义在两个同心圆的基础上。而不像线性渐变是定义在两点之间的。

换言之，它可以被定义为一种以循环方式延伸的颜色模式，即从内部颜色向外延伸到一种或多种其他颜色。这可以通过两个圆来完成，每个圆都有圆心和半径。创建圆后，可以使用addStopColor()方法在渐变上定义具有指定偏移值和不同颜色的新停止点。

径向渐变例子
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>径向渐变</title>
</head>

<body>
    <canvas id="canvas" style="border: 1px solid #aaa;display:block;margin:0 auto"></canvas>
</body>

</html>
<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");

        canvas.width = 600;
        canvas.height = 600;

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

            var radialGrad = context.createRadialGradient(300, 300, 0, 300, 300, 500);

            radialGrad.addColorStop(0.0, '#585858');
            radialGrad.addColorStop(0.25, '#336583');
            radialGrad.addColorStop(0.5, '#690');
            radialGrad.addColorStop(0.75, '#555');
            radialGrad.addColorStop(1.0, '#000');

            context.fillStyle = radialGrad;
            context.fillRect(0, 0, 600, 600);

        } else {
            alert('您的浏览器不支持canvas,请更换浏览器尝试~')
        }
    }

</script>

效果如下：

径向渐变

渝ICP备20006974号-2