使用drawImage方法在canvas下绘图,在谷歌浏览器下须要加onload事件
同时,注意定义canvas画布大小不能使用CSS设置,它会致使画布按比例缩放你设置的值。(缘由:在Canvas元素的内部存在一个名为2d渲染环境(2d redering context)的对象,因此,经过CSS设置画布尺寸会引发奇怪的效果。)html
正确方式为:canvas
1、在HTML页面中设置:浏览器
ui
2、经过JS设置:spa
varc = document.getElementById("myCanvas");
c.width = 600;
c.height = 500;code
MADvarc = document.getElementById("myCanvas");
varcxt = c.getContext("2d");
var img1 = new Image();
img1.src = "pic/search.jpg";
var img2 = new Image();
img2.src = "pic/model.jpg";
img1.οnlοad=function(){
cxt.drawImage(img1,0,0);
};
img2.οnlοad=function(){
cxt.drawImage(img2,250,186);
};
cxt.drawImage(img1,0,0);
cxt.drawImage(img2,250,186);