Canvas 画一个指定大小的渐变矩形

最新推荐文章于 2023-03-13 20:28:50 发布

houyanhua1

最新推荐文章于 2023-03-13 20:28:50 发布

阅读量267

点赞数

分类专栏： Canvas 文章标签： canvas 渐变矩形

本文链接：https://blog.csdn.net/houyanhua1/article/details/79883027

版权

Canvas 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="cvs"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        // 需求，在50,50点绘制一个宽高各100的渐变矩形
        var i = 0, len = 100;  //画100条线,相当于矩形的高是100
        for ( ; i < len; i++ ) {
            // 为了防止重绘之前的路径
            ctx.beginPath();
            ctx.moveTo( 50, 50 + i );
            ctx.lineTo( 150, 50 + i );
            // 颜色通道值依次累加
            ctx.strokeStyle = 'rgb(' + 0 + ', ' + Math.floor(255/99*i) + ', ' + 255 + ' )';
            ctx.stroke();
        }
    </script>
</body>
</html>