canvas的drawImage()方法，图片不显示。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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">
var img=new Image();
img.src=res[xx];
其次是大问题，就是你的图片为什么没有在canvas中绘制出来，因为你需要监听img的加载事件，要等图片加载完成才调用drawImage，不然会有问题，代码如下：
img.onload = function()
cxt.drawImage(img,0,0,350,427);
参考技术A 你要等图片载入之后再使用drawImage来写进去，也就是给你的img绑定一个load事件，drawImage卸载函数里面
以上是关于canvas的drawImage()方法，图片不显示。的主要内容，如果未能解决你的问题，请参考以下文章