openlayer6【六】绘制径向渐变色圆

228 阅读1分钟

核心代码

    const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
    gradient.addColorStop(0, 'rgba(255,255,255,0)');
    gradient.addColorStop(0.3, 'transparent');
    gradient.addColorStop(0.5, 'rgba(255,255,255,0.04)');
    gradient.addColorStop(0.8, 'rgba(255,255,255,0.08)');
    gradient.addColorStop(1, 'rgba(255,255,255,0.15)');
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
    ctx.fillStyle = gradient;
    ctx.fill();

    ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
    ctx.strokeStyle = 'rgba(255,255,255,0.15)';
    ctx.stroke();

效果图

image.png