第一种:getContext.drawImage(图片,画板left位置,画板top位置);
代码用法:
cv.drawImage(xiaogou,100,200);
第二种:getContext.drawImage(图片,画板left位置,画板top位置,插入画板后图片的width,图片height);
代码用法:
cv.drawImage(xiaogou,100,200,400,400);
第一种:getContext.drawImage(图片,截取图片的left位置,图片的top位置,,截取图片width,截取图片height,画板left位置,画板top位置,画板中图片的width,图片height);
代码用法:
cv.drawImage(xiaogou,10,20,50,30,100,200,400,300);
完整用法实例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas图片划入画布</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
canvas{
background:#272822;
}
</style>
</head>
<body><img src="xiaogou.jpg" alt="" width="500" height="300" id="xiaogou"/>
<canvas id="canvas" width="900" height="500" ></canvas>
<script type="text/javascript">
var xiaogou=document.getElementById("xiaogou");
var c=document.getElementById("canvas");
var cv=c.getContext('2d');
// xiaogou.onload=function(){
//
// cv.drawImage(xiaogou,100,200);
// }
// xiaogou.onload=function(){
// cv.drawImage(xiaogou,100,200,400,400);
// }
xiaogou.onload=function(){
cv.drawImage(xiaogou,10,20,50,30,100,200,400,300);
}
</script>
</body>
</html>
PS:在谷歌浏览器会出现无法写入画板情况,原因是由于图片未加载完毕使用:图片对象.onload=function(){}
此代码会当图片完全加载才执行写入画板操作,不会出现图片未加载进行希尔,找不到图片对象的空标签出现画板空白!