canvas-Synthetic-picture
canvas图片合成，支持右键另存为
一、合成内容
1.图片
- 背景图
- 专属二维码
- 用户头像（圆形）
2.用户名
二、项目地址
- https://github.com/StavinLi/canvas-Synthetic-picture
三、效果预览
-
https://stavinli.github.io/canvas-Synthetic-picture/
四、具体代码
<canvas width="750" height="1334" id="myCanvas"></canvas>
<script>
var bg = {
width: 750,
height: 1334,
src: "bg1.jpg"
}
var code = {
width: 170,
height: 170,
src: "code1.png"
}
var userInfo = {
name: "亦琛'",
width: 130,
height: 130,
src: "user1.jpg"
}
var image = new Image();
var image1 = new Image();
var image2 = new Image();
image.src = bg.src;
image1.src = code.src;
image2.src = userInfo.src;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
image.onload = function() {
ctx.drawImage(image, 0, 0, bg.width, bg.height);
ctx.drawImage(image1, 305, 980, code.width, code.height);
ctx.save();
ctx.arc(185, 1235, 65, 0, Math.PI * 2, false);
ctx.clip();
ctx.drawImage(image2, 120, 1171, userInfo.width, userInfo.height); // 在刚刚裁剪的园上画图
ctx.restore(); // 还原状态
ctx.font = "36px Georgia";
ctx.fillStyle = '#ffffff';
ctx.fillText(userInfo.name, 270, 1224);
}
</script>
