canvas渐变

canvas渐变

                渐变可以填充在矩形,圆形,线条,文本等等,各种形状可以自己定义不同的颜色。

                以下有两种不同的方式来设置Canvas渐变;

                        createLinearGradient(x,y.x1,y1)-创建线条渐变，x表示渐变开始的x坐标，y表示渐变开始的y坐标，x1表渐变结束的x坐标, y1表示渐变结束的y坐标

                        createRadialGradientx,y,r,x1,y1,r1)-创建一个径向/圆渐变

                当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

                addcalar5topU)方法指定颜色停止，参数使用坐标来描述，可以是0至1.

                使用渐变，设置fillStyle或strokestyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

示例代码：线性渐变

<canvas id="canvas"></canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        //1.获取一个画布(要创建一个画布对象)
        var canvas = document.getElementById("canvas");
        //2.创建一个画布上下文对象
        var context = canvas.getContext("2d");
        //3.beginPath()
        context.beginPath();
        //4.