html5图片叠加效果
时间: 2023-07-26 16:03:36 浏览: 54
HTML5提供了canvas标签和相关API,可以通过canvas实现图片的叠加效果。下面是一个简单的示例代码:
```html
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img1 = new Image();
img1.onload = function() {
context.drawImage(img1, 0, 0);
var img2 = new Image();
img2.onload = function() {
context.globalCompositeOperation = "multiply"; // 设置叠加模式为相乘
context.drawImage(img2, 0, 0);
}
img2.src = "image2.png";
}
img1.src = "image1.png";
</script>
```
上面的代码中,我们首先创建了一个canvas标签,然后通过JavaScript获取canvas对象和绘图上下文。接着创建了两个Image对象分别加载要叠加的两张图片,然后在img1的onload事件中绘制第一张图片,再在img2的onload事件中设置叠加模式为相乘,并绘制第二张图片。在这个示例中,我们设置叠加模式为multiply,这会对两张图片的像素进行相乘计算,从而实现叠加效果。你可以尝试修改叠加模式,例如改为"add","overlay"等,观察不同效果。