画布 - 渐变中的 RGBA 不起作用答案

【问题标题】：Canvas - RGBA in gradient not working画布 - 渐变中的 RGBA 不起作用
【发布时间】：2013-06-18 21:39:05
【问题描述】：

我只是想用 rgba 来填充一个渐变的对象。然而，屏幕上什么也没有出现，简单的 addcolorstop 可以工作，只是不适用于 rgba。

这行得通：

 var ctx = this.context;
    var fillColor = ctx.createRadialGradient(100, 100, 10, 100, 100, 70);
    fillColor.addColorStop(0.2, "green");

    ctx.fillStyle = fillColor;
    ctx.beginPath();
    ctx.arc(obj.x, obj.y, obj.r, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.fill();

这不是：

var ctx = this.context;
    var fillColor = ctx.createRadialGradient(100, 100, 10, 100, 100, 70);
    grad.addColorStop(0.0, 'rgba(0,0,0,1)');
    grad.addColorStop(0.5, 'rgba(0,0,0,0)');
    grad.addColorStop(1.0, 'rgba(0,0,0,1)');
    ctx.fillStyle = fillColor;
    ctx.beginPath();
    ctx.arc(obj.x, obj.y, obj.r, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.fill();

【问题讨论】：

标签： canvas rgba

【解决方案1】：

在我的情况下，这两个例子都不起作用。如果我假设this 是画布，那么应该使用getContext() 方法返回一个用于在画布上绘图的对象：

var ctx = canvas.getContext('2d');
var grd = ctx.createRadialGradient(100, 100, 10, 100, 100, 70);
grd.addColorStop(0, 'rgba(0,0,0,0)');
grd.addColorStop(1, 'rgba(0,0,0,1)');

ctx.fillStyle = grd;
ctx.beginPath();
ctx.arc(150, 150, 100, 0, 2 * Math.PI, true);
ctx.closePath();
ctx.fill();

【讨论】：