结果：
代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { text-align: center; } canvas { background: #ddd; } </style> </head> <body> <h3>绘制图像</h3> <canvas id="c17" width="500" height="400"></canvas> <script> var ctx = c17.getContext('2d'); //下述代码的执行结果输出是： 1 、 3 、 2 var img = new Image(); img.src = 'img/p4.png'; console.log(1, img.width, img.height); img.onload = function(){ console.log('2 图片加载完成') console.log(img.width, img.height); ctx.drawImage(img, 0, 0); ctx.drawImage(img, 500-img.width, 0); } console.log('3 JS执行完成') </script> </body> </html>