createRadialGradient和透明度 [英] createRadialGradient and transparency

问题描述

我在HTML5画布上玩 createRadialGradient（）。它就像一个魅力，除非我正在尝试实现（半透明）。

I'm playing around with createRadialGradient() on HTML5 canvas. It works like a charm, except when I'm trying to implement (semi-)transparency.

我使这个jsFiddle让希望更清楚： http://jsfiddle.net/rfLf6/1/ 。

I made this jsFiddle to make things hopefully clearer: http://jsfiddle.net/rfLf6/1/.

function circle(x, y, r, c) {
    ctx.beginPath();
    var rad = ctx.createRadialGradient(x, y, 1, x, y, r);
    rad.addColorStop(0, c);
    rad.addColorStop(1, 'transparent');
    ctx.fillStyle = rad;
    ctx.arc(x, y, r, 0, Math.PI*2, false);
    ctx.fill();
}

ctx.fillRect(0, 0, 256, 256);

circle(128, 128, 200, 'red');
circle(64, 64, 30,    'green');

正在发生的是一个圆圈（径向渐变）涂在（x ，y）半径 r ，颜色停止为 r 和 '透明'。但是，绿色圆圈从绿色变为黑色，而它应该变为透明，即背景圆的适当红色。

What is happening is a circle (radial gradient) is painted at (x, y) with radius r and the color stops are r and 'transparent'. However, the green circle is going from green to black, whilst it should go to transparent, i.e. the appropriate red colors of the background circle.

如何在HTML5画布上实现透明的径向渐变？

How does one implement transparent radial gradients on HTML5 canvas?

推荐答案

好吧，因为你问：

我不太了解使用JavaScript的< canvas> ，但我知道CSS3渐变，以及通常的工作方式透明度是使用 rgba 颜色。

I don't know much about using <canvas> with JavaScript, but I do know about CSS3 gradients, and the usual way to work with transparency is to use rgba colours.

要使渐变渐弱变为透明，可以添加一个透明版本的相同颜色。

To make the gradient "fade out" to transparent, you can add a transparent version of the same colour.

这就是我在这里所做的： http： //jsfiddle.net/thirtydot/BD3xA/

That's what I did here: http://jsfiddle.net/thirtydot/BD3xA/

这篇关于createRadialGradient和透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！