canvas
canvas中绘制图片:
***必须等到图片加载完成后***
方法(必须等到图片加载完成后即):
img对象.onload=function(){
bi.drawImage(img对象,x坐标,y坐标);
bi.drawImage(img对象,x坐标,y坐标,width,height);
bi.drawImage(img对象,裁切x坐标,裁切y坐标,裁切width,裁切height,绘制x坐标,绘制y坐标,绘制wdith,绘制height);
}
img对象两种方式:
(1)页面img标签后,dom获取
(2)new Image();Image对象.src='图片路径'
Code Example:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.canvas{
border:solid 2px black;
}
</style>
</head>
<body>
<canvas width="300px" height="200px" class='canvas'>您的浏览器不支持canvas标签,请变更支持canvas的浏览器</canvas>
<script>
var canvas=document.querySelector(".canvas");
var bi=canvas.getContext('2d');
var img2=document.querySelector('img');
bi.beginPath();
var tempImg=new Image();
tempImg.src='img/lb1.jpg';
tempImg.onload=function()
{
// bi.drawImage(tempImg,50,50,);
// bi.drawImage(tempImg,50,50,200,200);
bi.drawImage(tempImg,50,50,200,200,0,0,200,200);
}
bi.closePath();
</script>
</body>
</html>
