使用HTML Canvas创建反射图像？ [英] Create reflected image with HTML Canvas?
问题描述
我有下面的代码，试图将垂直镜像图像与透明到背景颜色渐变。当合并这两个效果失败，我需要在画布上覆盖一个PNG渐变，而不是试图让画布来执行这两个操作？
I have the following code which tries to combine a vertical mirrored image with a transparent to background color gradient. When combining these two effects it fails, do I need to overlay a PNG gradient over the canvas instead of trying to get the canvas to perform both operations?
<!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, 75);
ctx.scale(1, -1);
ctx.drawImage(img, 0, 0, 75, 75);
// add gradient
var grad = ctx.createLinearGradient(0, 0, 0, 20);
grad.addColorStop(0, 'transparent');
grad.addColorStop(1, '#eeeeee');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, 75, 20);
};
img.src = "test.jpg";
</script>
</head>
<body>
<div><img src="test.jpg" height="75" width="75" /></div>
<canvas id="output" width="75" height="20"></canvas>
</body>
</html>
推荐答案
不需要2个canvas元素。下面的代码工作。在Linux上的FireFox 3.0上测试它。
There is no need for 2 canvas elements. The code below works.Tested it on FireFox 3.0 on Linux.
我改变了画布大小，所以我可以看到它更好的测试，我做了画布200 x 100像素。您需要调整回您的需要（75x20）。为了测试的目的，我将叠加层设置为100x100像素，因此我可以看到一半的渐变图片。
I have changed the canvas sizes so I could see it better while testing, I made the canvas 200 x 100 pixels. You will need to resize back to your needs (75x20). For testing purposes, I've made the overlay 100x100 pixels so I could see half the image with a gradient.
<!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属性。
I think you were basically missing the alpha attribute on the gradient.
grad.addColorStop(0.7, 'rgba(255,255,255,0)');
第四个参数是alpha。此外，由于您将画布上下颠倒，所以当前的渐变是上下颠倒的（因此第二个颜色停止有透明度，但块的顶部是透明的）。
The fourth parameter is alpha. Also, since you flip the canvas upside down, the gradient is currently drawn upside down (hence the second color stop has the transparency on it, and yet the block is transparent on the top side).
如果你想正确地做事，你需要：
If you wanted to do things correctly, you would need to:
ctx.save();
ctx.translate(0, 100);
ctx.scale(1, -1);
ctx.drawImage(img, 0, 0, 200, 100);
ctx.restore();
现在，您可以根据需要绘制透明渐变块。
And now you can draw your transparent gradient block as you need it.
此外，对我来说ctx.fillRect（）命令无效。我不得不使用ctx.rect（）和ctx.fill（）。
Also, for me the ctx.fillRect() command did not work. I had to use ctx.rect() and ctx.fill().
希望这有帮助。
这篇关于使用HTML Canvas创建反射图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
