558day(绘制一个从黑到白的渐变矩形.html)

最新推荐文章于 2021-06-19 10:50:15 发布

原创最新推荐文章于 2021-06-19 10:50:15 发布 · 562 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript在HTML Canvas上绘制从黑色到白色的渐变矩形的方法。通过循环设置每一像素行的颜色，实现了从左到右由深至浅的渐变效果，展示了如何利用RGB值的变化来实现视觉上的渐变过渡。

《2019年4月15日》【连续 558天】

标题：绘制一个从黑到白的渐变矩形.html；
内容：

var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*绘制一个矩形*/
    /*线是由点构成的*/
    /*ctx.moveTo(100,100);
    ctx.lineTo(355,100);
    ctx.lineWidth = 30;*/
    /*颜色的填充*/
    //ctx.strokeStyle = '#fff';
    /*黑到白的渐变颜色*/
   /* ctx.stroke();*/

    /*线是由点构成的*/
    ctx.lineWidth = 30;
    for (var i = 0; i < 255; i++) {
        ctx.beginPath();
        ctx.moveTo(100+i-1,100);
        ctx.lineTo(100+i,100);
        ctx.strokeStyle = 'rgb('+i+',0,0)';
        ctx.stroke();
    }