鍍金池/ 問答/HTML5  HTML/ canvas合成

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>

沒有報(bào)錯(cuò)，但就是顯示不出來圖片

回答
編輯回答
青檸

最后兩句寫到onload里面啦~加載圖片是要時(shí)間的~而JS又不是同步執(zhí)行的~

IMG.onload = function() {
  context.drawImage(IMG, 0, 0);
  const url = canvas.toDataURL('image/png');
  document.getElementById('canvas').innerHTML = `<img src=${url} />`;
}
2017年6月17日 21:36