Canvas 使用createLinearGradient绘制颜色渐变的矩形

需求

之前我使用遍历的方式绘制了一个线的颜色渐变,这种方式其实不好,本章节来看看使用createLinearGradient方法来设置颜色渐变。

首先使用fillRect(x,y,w,h)绘画一个矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #cccccc;
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            /*获取元素*/
            var myCanvas = document.querySelector('#myCanvas');
            /*获取绘图工具*/
            var ctx = myCanvas.getContext('2d');

            //绘制矩形
            x0 = 100; // 矩形起点的x
            y0 = 100; // 矩形起点的y
            w = 200;  // 矩形宽度
            h = 100;  // 矩形高度
            ctx.fillStyle = 'gold';
            ctx.fillRect(x0,y0,w,h); // 绘制矩形

        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

浏览器显示如下:

13423234-89adf2a624daf374.png

使用createLinearGradient设置渐变色

createLinearGradient() 方法创建线性的渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示:请使用该对象作为 strokeStyle或 fillStyle 属性的值。

提示:请使用addColorStop()方法规定不同的颜色,以及在 gradient 对象中的何处定位颜色。

JavaScript 语法:

context.createLinearGradient(x0,y0,x1,y1);

参数描述:

  • x0 渐变开始点的 x 坐标
  • y0 渐变开始点的 y 坐标
  • x1 渐变结束点的 x 坐标
  • y1 渐变结束点的 y 坐标

示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #cccccc;
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            /*获取元素*/
            var myCanvas = document.querySelector('#myCanvas');
            /*获取绘图工具*/
            var ctx = myCanvas.getContext('2d');

            // 创建渐变色
            var my_gradient = ctx.createLinearGradient(100,100,300,200);
            my_gradient.addColorStop(0,"black");
            my_gradient.addColorStop(1,"white");
            ctx.fillStyle = my_gradient; // 设置渐变色

            //绘制矩形
            x0 = 100; // 矩形起点的x
            y0 = 100; // 矩形起点的y
            w = 200;  // 矩形宽度
            h = 100;  // 矩形高度
            ctx.fillRect(x0,y0,w,h); // 绘制矩形

        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

浏览器显示效果如下:

13423234-9bfff34405f9ab46.png
13423234-0e3934319aa622f6.png
原文链接:加载失败,请重新获取