canvas合成
<body>
<div id="canvas"></div>
<script>
const canvas = document.createElement('canvas');
const size = 200;
canvas.width = size;
canvas.height = size;
let context = canvas.getContext('2d');
let IMG = new Image();
IMG.src = './Mask.png';
IMG.onload = function() {
context.drawImage(IMG, 0, 0);
}
const url = canvas.toDataURL('image/png');
document.getElementById('canvas').innerHTML = `<img src=${url} />`
</script>
</body>
没有报错，但就是显示不出来图片
宝慕林4294392浏览 269回答 1
1回答
-
qq_笑_17
最后两句写到onload里面啦~加载图片是要时间的~而JS又不是同步执行的~IMG.onload = function() { context.drawImage(IMG, 0, 0); const url = canvas.toDataURL('image/png'); document.getElementById('canvas').innerHTML = `<img src=${url} />`;}
随时随地看视频慕课网APP
相关分类
JavaScript