效果展示： 代码部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>渐变矩形</title> <style> canvas { border: 1px dashed red; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> //获取canvas元素 var myCanvas = document.querySelector('canvas'); //获取上下文 var ctx = myCanvas.getContext('2d'); //利用渐变来填充矩形 var linear = ctx.createLinearGradient(100,100,500,100); //添加颜色段 linear.addColorStop(0,'pink'); linear.addColorStop(1,'blue'); //改变描边的样式为渐变色 ctx.strokeStyle = linear; //画一个100,100为起点，宽高400,100的描边矩形 ctx.strokeRect(100,100,400,100); //改变填充的样式并绘画填充矩形 ctx.fillStyle = linear; ctx.fillRect(100,100,400,100); </script> </body> </html>