基于Html5的网页大头贴源码
时间: 2023-11-14 22:05:46 浏览: 46
以下是一个简单的基于HTML5的网页大头贴源码,你可以根据自己的需要进行修改和完善:
```
<!DOCTYPE html>
<html>
<head>
<title>网页大头贴</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<br>
<button onclick="saveImage()">保存图片</button>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// 绘制背景
context.fillStyle = "#FFFFFF";
context.fillRect(0, 0, canvas.width, canvas.height);
// 绘制头像
var image = new Image();
image.onload = function() {
context.drawImage(image, 100, 100, 300, 300);
};
image.src = "avatar.png";
// 绘制表情
var emoji = new Image();
emoji.onload = function() {
context.drawImage(emoji, 150, 200, 200, 200);
};
emoji.src = "emoji.png";
// 保存图片
function saveImage() {
var link = document.createElement('a');
link.download = 'avatar.png';
link.href = canvas.toDataURL();
link.click();
}
</script>
</body>
</html>
```
在这个代码中,我们首先创建了一个canvas元素,并设置了它的宽度和高度。然后我们使用JavaScript的Canvas API在canvas上绘制了一个背景和一个头像。接着我们还绘制了一个表情。最后,我们提供了一个保存图片的按钮,当用户点击这个按钮时,我们使用canvas的toDataURL()方法将canvas转换为一个base64编码的URL,并将这个URL设置为一个下载链接,让用户可以下载这个网页大头贴。