canvas设置渐变

Posted ye-hcj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas设置渐变相关的知识,希望对你有一定的参考价值。

canvas设置渐变

  1. 方法

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

    技术图片

    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. 径向渐变

    技术图片

    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插入图片设置背景,渐变

对于canvas画图时,改变其中一条线的颜色,该怎么解决

canvas怎么画一个渐变的圆角边框,填充的也行

canvas之渐变

Canvas使用渐变之-线性渐变详解

canvas渐变