Canvas绘制从黑到白的渐变矩形

Devops海洋的渔夫

发布于 2020-02-13 13:34:04

6070

发布于 2020-02-13 13:34:04

文章被收录于专栏：Devops专栏

Canvas绘制一条线条可以使用strokeStyle方法来绘制线条的颜色。但是却是绘制一条直线的。示例如下：

绘制一条黑色的线

<!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');

            /*绘画第一条虚线*/
            ctx.moveTo(100,100.5);
            ctx.lineTo(300,100.5);

            ctx.lineWidth = 30; // 设置线条的宽度
            ctx.strokeStyle = "rgb(0,0,0)"; // 设置线条为黑色
            
            /*绘画线条*/
            ctx.stroke();

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

浏览器显示如下：

但是设置线条的颜色不能设置渐变色呀，那么怎么办呢？

下面让我们来换个思路，首先线是由点来组成的，也就是说可以绘画无数个点，每个点设置不同的颜色，最后组合成为一条线，那么就可以绘画出渐变色来。

绘画255个点，设置颜色从0-255变化的点，组成线条

<!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');

            /*绘画第一条虚线*/
            ctx.moveTo(100,100.5);
            ctx.lineTo(300,100.5);
            ctx.lineWidth = 30; // 设置线条的宽度
            ctx.strokeStyle = "rgb(0,0,0)"; // 设置线条为黑色
            ctx.stroke();

            /*绘制 0 - 255 个点，组成渐变色线条*/
            for (var i = 0; i < 255; i++) {
                ctx.beginPath(); // 开启路径，设置不同的样式
                ctx.moveTo(100 + i,300.5);
                ctx.lineTo(101 + i,300.5);
                ctx.lineWidth = 30; // 设置线条的宽度
                ctx.strokeStyle = "rgb("+i+","+i+","+i+")"; // 设置每个点的颜色，从 0 - 255，从黑到白
                ctx.stroke();
            }

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

浏览器显示如下：