我想在画布上实现由 CSS 定义的相同线性渐变外观。使用了一种在不使用透明度设置之前效果很好的方法。当使用相同的线性渐变颜色设置定义了 rgba 颜色值时，结果看起来不一样，请参阅以下链接：
JSFiddle: 例子
var canvas = document.getElementById("myCanvas");
var ctx = document.getElementById("myCanvas").getContext("2d");
var w = canvas.width;
var h = canvas.height;
var cssAng = Math.PI;
var dir = getDir(cssAng, w, h);
var gr = ctx.createLinearGradient(dir.x0,dir.y0,dir.x1,dir.y1);
gr.addColorStop(0, "rgb(255, 255, 255, 0)");
gr.addColorStop(0.87, "rgb(0, 0, 0, 1)");
ctx.fillStyle = gr;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
function getDir(radian, width, height) {
radian += Math.PI;
const HALF_WIDTH = width * 0.5;
const HALF_HEIGHT = height * 0.5;
const lineLength = Math.abs(width * Math.sin(radian)) …