html5画布插入图片,html5画布导入图片

Canvas是在html5中新出现的元素，目前支持的有chrome浏览器，360和ie都不支持，标签如下

style="border:1px solid #c3c3c3;">

Canvas本身并不具有绘图的功能，只是提供一块绘图的区域，在JS代码中进行调用绘图

var c=document.getElementByIdx_x_x("myCanvas");//获取标签

var cxt=c.getContext("2d");//2D绘图

var img=new Image()//新建图像实例

img.src="flower.bmp"//设置图像源

cxt.drawImage(img,0,0);//绘制图像，drawImage有多种重载函数，具体参考w3l

//在这儿需要注意一个问题，如果图像较大需要先载入图像，利用img.onload函数等待载入完毕，在调用drawImage函数进行显示,否则会是一片空白。修正代码如下：

var c=document.getElementByIdx_x_x("myCanvas");//获取标签

var cxt=c.getContext("2d");//2D绘图

var img=new Image()//新建图像实例

img.src="flower.bmp"//设置图像源

img.οnlοad=function()

{

cxt.drawImage(img,0,0);//绘制图像，drawImage有多种重载函数，具体参考w3l

} //onload事件函数

整体示例

align="center">画布

align="center"> width="200" height="100">

var c=document.getElementByIdx_x("myCanvas");

var cxt=c.getContext("2d");

var img=new Image()//新建图像实例

img.src="mt.bmp"//设置图像源

img.οnlοad=function()

{

c.width=img.width;

c.height=img.height;

cxt.drawImage(img,0,0);//绘制图像，drawImage有多种重载函数，具体参考w3l，至此载入图片完毕

cxt.fillStyle="#FF0000";//在图片上绘制其它图形

cxt.beginPath();

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

var grd=cxt.createLinearGradient(0,0,175,50);

grd.addColorStop(0,"#FF0000");

grd.addColorStop(1,"#00FF00");

cxt.fillStyle=grd;

cxt.fillRect(0,0,175,50);

}