javascript - 在 HTML 画布上绘制不透明径向渐变并将其用作背景

Question

我正在寻找一种使画布对象看起来像这样的方法：http ://www.onetuts.com/attachments/2010/05/07/1_201005072156152XYem.jpg

渐变应该从 rgba(0,0,0,0.8) 变为 rgba(0,0,0,0.2) 但我没有让画布为 1280x720px。

Answer 1

您的示例图像中的渐变是不同的 - 从0x828282到0x0a0a0a。看一下这个：

var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
var grd = cxt.createRadialGradient(150, 150, 0, 150, 150, 150);

grd.addColorStop(0, "#828282");
grd.addColorStop(1, "#0a0a0a");
cxt.fillStyle = grd;
cxt.fillRect(0, 0, 300, 300);

<canvas id="myCanvas" width="300" height="300"></canvas>