我只想用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();
答案 0 :(得分: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();