【canvas】基础练习三 图片

【canvas】Demo1 drawImage

drawImage(img,x,y); 

【canvas】基础练习三 图片

<!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)

【canvas】基础练习三 图片

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

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

你可能感兴趣的:(canvas)