HTML5 Canvas 如何使用线性渐变-之路教程

HTML5 Canvas 如何使用线性渐变

HTML5 Canvas线性渐变示例

<!DOCTYPE HTML>

<html>

  <head>

    <style>

      body {

        margin: 0px;

        padding: 0px;

      }

      #myCanvas {

        border: 1px solid #9C9898;

      }

    </style>

    <script>

        window.onload = function () {

            var canvas = document.getElementById("myCanvas");

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

            context.beginPath();

            context.moveTo(170, 80);

            context.bezierCurveTo(120, 100, 130, 150, 230, 150);

            context.bezierCurveTo(250, 180, 320, 180, 340, 150);

            context.bezierCurveTo(420, 140, 420, 120, 390, 100);

            context.bezierCurveTo(430, 40, 370, 30, 340, 50);

            context.bezierCurveTo(320, 5, 220, 20, 250, 50);

            context.bezierCurveTo(200, 5, 150, 20, 170, 80);

            context.closePath();

            var grad = context.createLinearGradient(230, 0, 370, 200);

            grad.addColorStop(0, "yellow");

            grad.addColorStop(1, "Gray");

            context.fillStyle = grad;

            context.fill();

            context.lineWidth = 4;

            context.strokeStyle = "red";

            context.stroke();

        };

 

    </script>

  </head>

  <body>

    <canvas id="myCanvas" width="578" height="210"></canvas>

  </body>

</html>

HTML5 Canvas线性渐变

我们可以使用CreateLineAregradient()方法在HTML5中创建线性渐变。
它由定义梯度方向的虚线定义。
创建梯度后，我们可以使用AddColorStop属性插入颜色。

语法：

var grad = context.createLinearGradient(startX, startY, endX, endY);
grad.addColorStop(offset, color);

日期：2020-04-11 23:04:09 来源：oir作者：oir

←HTML5画布线条连接

html5 canvas路径→

HTML5 Canvas线性渐变示例

HTML5 Canvas线性渐变

目录