<canvas id="myCanvas" width="200" height="100"></canvas>
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="w3c.gif";
cxt.drawImage(img,0,0);
图片此时是不显示的,因为图片在没加载完的情况下用canvas绘制会失败,修改如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
<img src="img/w3c.gif" hidden="hidden" id="img1">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=document.getElementById("img1");
img.onload=function(){cxt.drawImage(img,0,0);};
也可用定时器实现。