<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <img src="qr.jpg" alt=""> <canvas width="400px" height="400px"> </canvas> <script> var c = document.getElementsByTagName('canvas')[0] ctx=c.getContext('2d'); var img = new Image(); img.src = "./qr.jpg"; img.onload = function(){ ctx.drawImage(img,100,100,240,164); } // var img=document.getElementsByTagName('img')[0] console.log(img) // img.src='./bar.png' </script> </body> </html>
img 要加载完成后 才能画到画布上