效果
完整代码
<body>
<canvas id="canvas" width="800" height="800"></canvas>
<img src="" class="generateImg">
</body>
<script>
// 创建 canvas
const canvas = document.querySelector('#canvas')
const ctx = canvas.getContext('2d')
// 画图
var myImg = new Image();
myImg.src = 'myImg.jpg';
var bgImg = new Image();
bgImg.src = 'bg.png';
setTimeout(function(){
ctx.drawImage(myImg, 0, 0, 800, 800)
ctx.drawImage(bgImg, 0, 0, 800, 800)
document.querySelector('.generateImg').src = canvas.toDataURL("image/png")
},10)
// 显示
</script>
</html>
备注
drawImage这个方法，当图片在没加载完的情况下使用失败failed to execute ‘drawimage’
所以可将图片提前放到html中
<img src="xxx.jpg" id="imgs" style="display:none"></img>
或者使用setTimeout
背景图片
