创建图像HTML,javascript – 使用HTML Canvas创建反射图像？

不需要2个画布元素.下面的代码可以工作.在Linux上的FireFox 3.0上进行测试.

我已经改变了画布大小,所以我可以在测试时看到它更好,我制作了200 x 100像素的画布.您需要调整大小以满足您的需求(75×20).出于测试目的,我已经将叠加层设置为100×100像素,因此我可以看到带有渐变的图像的一半.

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

body {

background-color: #eee;

text-align: center;

padding-top: 150px;

}

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";

编辑解释其中一些：

我认为你基本上缺少渐变的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().

希望这可以帮助.