黑到白的渐变矩形 · 前端速查手册

>[success] # 绘制从黑到红 ![](https://box.kancloud.cn/1c7d89d8794654faa88047b59259e0f6_599x239.png) ~~~ 1.线条的高度就是设置线条的宽度 2.长度+255 rgb的渐变最大值 ~~~ >[danger] ##### 代码 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); 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(); } </script> </body> </html> ~~~