不需要 2 个画布元素。下面的代码有效。在 Linux 上的 FireFox 3.0 上进行了测试。
我更改了画布尺寸，以便在测试时可以更好地看到它，我将画布设置为 200 x 100 像素。您需要将大小调整回您的需要 (75x20)。出于测试目的，我将叠加层设为 100x100 像素，这样我就可以看到带有渐变的一半图像。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
body {
background-color: #eee;
text-align: center;
padding-top: 150px;
}
</style>
<script type="text/javascript">
var img = new Image();
img.onload = function() {
var ctx = document.getElementById("output").getContext("2d");
// reflect image
ctx.translate(0, 100);
ctx.scale(1, -1);
ctx.drawImage(img, 0, 0, 200, 100);
// add gradient
var grad = ctx.createLinearGradient(0, 0, 0, 100);
grad.addColorStop(0.3, 'rgb(255,255,255)');
grad.addColorStop(0.7, 'rgba(255,255,255,0)');
ctx.fillStyle = grad;
ctx.translate(0,0);
ctx.rect(0, 0, 100, 100);
ctx.fill();
};
img.src = "img/avatarW3.png";
</script>
<canvas id="output" width="200" height="100" style="border:1px solid black;"></canvas>
编辑解释其中的一些内容：
我认为你基本上错过了渐变的 alpha 属性。
grad.addColorStop(0.7, 'rgba(255,255,255,0)');
第四个参数是alpha。另外，由于您将画布上下翻转，因此当前绘制的渐变是上下颠倒的（因此第二个色标具有透明度，但该块在顶部是透明的）。
如果你想正确地做事，你需要：
ctx.save();
ctx.translate(0, 100);
ctx.scale(1, -1);
ctx.drawImage(img, 0, 0, 200, 100);
ctx.restore();
现在您可以根据需要绘制透明渐变块。
另外，对我来说 ctx.fillRect() 命令不起作用。我必须使用 ctx.rect() 和 ctx.fill()。
希望这可以帮助。
