使用drawImage方法在canvas下绘图,在谷歌浏览器下需要加onload事件
同时,注意定义canvas画布大小不能使用CSS设置,它会导致画布按比例缩放你设置的值。(原因:在Canvas元素的内部存在一个名为2d渲染环境(2d redering context)的对象,所以,通过CSS设置画布尺寸会引起奇怪的效果。)
正确方式为:
一、在HTML页面中设置:
<canvas id="myCanvas" width="600px" height="500px" style="border:1px solid #c3c3c3;"></canvas>
二、通过JS设置:
varc = document.getElementById("myCanvas");
c.width = 600;
c.height = 500;
<span style="font-size:18px;color:#330033;"><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>MAD</title>
</head>
<body>
<canvas id="myCanvas" width="600px" height="500px" style="border:1px solid #c3c3c3;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var cxt = 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);
</script>
</body>
</html></span>