本文实例为大家分享了canvas绘制渐变颜色的矩形的具体代码，供大家参考，具体内容如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style></head><body><div class="linearGradient"></div><canvas width="600" height="400"></canvas><script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); var linearGradient = ctx.createLinearGradient(100,100,500,400); linearGradient.addColorStop(0,'pink'); //linearGradient.addColorStop(0.5,'red'); linearGradient.addColorStop(1,'blue'); ctx.fillStyle = linearGradient; ctx.fillRect(100,100,400,100); </script></body></html>运行结果如下:
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
最新文章
热门文章
猜你喜欢
