Question

canvas的drawImage()方法，图片不显示。

js代码：
var xx = Math.ceil(Math.random()*8);
var res = ["images/hongluan.jpg",
"images/hongyan.jpg",
"images/qiangnei.jpg",
"images/qiangwai.jpg",
"images/tianxi.jpg",
"images/xianchi.jpg",
"images/yumen.jpg",
"images/zhengyuan.jpg",
"images/muyu.jpg"];
var img = document.getElementById("img");
img.setAttribute("src",res[xx].toString());
var canvas = document.getElementById("thecanvas");
var cxt = canvas.getContext("2d");
cxt.drawImage(img,0,0,350,427);

html代码：
<img id="img" src="" alt="" style="display:none">
<canvas style="position: absolute; z-index: 1;bottom: 2%;" width=350 height=427 id="thecanvas">

Answer 1

首先给个小建议，img标签压根不需要你手动写，你可以直接创建，代码如下：
var img=new Image();
img.src=res[xx];

其次是大问题，就是你的图片为什么没有在canvas中绘制出来，因为你需要监听img的加载事件，要等图片加载完成才调用drawImage，不然会有问题，代码如下：
img.onload = function(){
cxt.drawImage(img,0,0,350,427);

}

Answer 2

你要等图片载入之后再使用drawImage来写进去，也就是给你的img绑定一个load事件，drawImage卸载函数里面