canvas设置渐变

canvas设置渐变

1. 方法文章来源地址https://www.yii666.com/article/756224.html

   createLinearGradient(x1, y1, x2, y2) 线性渐变
   
   createRadialGradient(x1, y1, r1, x2, y2, r2) 辐射渐变
   

2. 线性渐变网址:yii666.com

   文章来源地址:https://www.yii666.com/article/756224.html

   const canvas = document.getElementById('canvas');
   
   const ctx = canvas.getContext('2d');
   
   var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
   
   lingrad.addColorStop(0, 'orange');
   
   lingrad.addColorStop(0.5, 'red');
   
   lingrad.addColorStop(1, 'pink');
   
   ctx.fillStyle = lingrad;
   
   ctx.fillRect(10, 10, 130, 130);
   

3. 径向渐变网址:yii666.com<

   文章地址https://www.yii666.com/article/756224.html

   var radgrad = ctx.createRadialGradient(90, 90, 20, 100, 100, 50);
   
   radgrad.addColorStop(0, 'white');
   
   radgrad.addColorStop(0.6, 'rgba(255, 165, 0, 0.8)');
   
   radgrad.addColorStop(0.8, 'rgba(255, 165, 0, 0.3)');
   
   radgrad.addColorStop(1, 'rgba(255, 165, 0, 0)');
   
   ctx.fillStyle = radgrad;
   
   ctx.fillRect(0, 0, 150, 150);