canvas设置渐变
-
方法
createLinearGradient(x1, y1, x2, y2) 线性渐变 createRadialGradient(x1, y1, r1, x2, y2, r2) 辐射渐变
-
线性渐变
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);
-
径向渐变
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);