【canvas】基础练习三 图片

【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创建新像素

目前没有找到这三个方法的优点，暂不示例。　

posted @ 2015-04-20 16:32  dtdxrk  阅读(422)  评论(0)  编辑  收藏  举报