【canvas】Demo1 drawImage
drawImage(img,x,y);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片</title>
</head>
<body>
<canvas id="wapper" width="500" height="500"></canvas>
<script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/
var logo = new Image();
logo.src = 'http://www.baidu.com/img/bd_logo1.png';
logo.onload = function (){
_2d.drawImage(this, 0, 0);
}
</script>
</body>
</html>
【canvas】Demo2 drawImage
drawImage(img,x,y)
drawImage(img,x,y,w,h)
drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片</title>
</head>
<body>
<canvas id="wapper" width="500" height="500"></canvas>
<script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/
var logo = new Image();
logo.src = 'http://icon.xgo-img.com.cn/mainpage/20150226/logo_07.jpg';
logo.onload = function (){
_2d.drawImage(this, 0, 0);/*drawImage(img,x,y)*/
_2d.drawImage(this, 300, 0, 100, 100);/*drawImage(img,x,y,w,h)*/
_2d.drawImage(this, 50, 50,100,100,0,200,100,100);/*drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)*/
}
</script>
</body>
</html>
【canvas】Demo3 getImageData putImageData createImageData
getImageData获取图片上的一部分数据
putImageData绘制获取图片上的数据
createImageData创建新像素
目前没有找到这三个方法的优点，暂不示例。