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);

巴特西

canvas设置渐变

canvas设置渐变

最新文章

热门文章