画布-渐变中的RGBA无法正常工作

问题描述

我只想使用rgba来用渐变填充对象.但是，屏幕上什么也没有出现，简单的addcolorstop起作用，而rgba则不起作用.

I just want to use rgba to fill an object with gradient. However nothing appears on screen, simple addcolorstop works, just not with 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();

推荐答案

就我而言，这两个示例都不起作用.如果我假设 this 是画布，则应使用 getContext()方法返回用于在画布上绘制的对象:

In my case both examples don't work. If I assume that this is the canvas, then getContext() method should be used to return an object for drawing on the canvas:

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

这篇关于画布-渐变中的RGBA无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！