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

【问题标题】：Drawing a opacity radial gradient on a HTML canvas and use it as a background在 HTML 画布上绘制不透明径向渐变并将其用作背景
【发布时间】：2011-03-22 08:39:01
【问题描述】：

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

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

【问题讨论】：

标签： javascript html canvas radial-gradients

【解决方案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);

&lt;canvas id="myCanvas" width="300" height="300"&gt;&lt;/canvas&gt;

【讨论】：

对我有用，但没有我想的那么大。它应该是 1280x720px，而不是 HEX 值，我想使用 rgba(130,130,130,0.2) 等。
您可以在函数 addColorStop() 中编写 rgba(130,130,130,255) 而不是 #828282。也只需在width="300" height="300" 和cxt.fillRect(0,0,300,300); 中根据需要更改大小。如果您认为它可以解决您的问题，请不要忘记将答案标记为已接受。
我正在执行同样的任务，Google 已经将这个 7 小时前的页面编入索引。惊人的。您介意通过 createRadialGradient 参数握住我的手吗？
这里很好canvas documentation
@JGrubb createRadialGradient(x0, y0, r0, x1, y1, r1)：x0, y0是圆心，半径为r0； x1, y1 是圆 B 的圆心，半径为 r1。圆 A 的边缘将是第 0 站的颜色，在圆 B 的边缘逐渐变为第 1 站的颜色。有关详细信息，请参阅WhatWG docs。