【canvas】高级功能一 变形

【canvas】Demo1 scale缩放

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片</title>
</head>
<body>

<canvas id="wapper" width="1000" height="1000"></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, 5, 5);/*drawImage(img,x,y)*/

	_2d.scale(1, 1);
	_2d.drawImage(this, 200, 5);/*drawImage(img,x,y)*/

	_2d.scale(2,2);
	_2d.drawImage(this, 0, 50);/*drawImage(img,x,y)*/

	_2d.scale(0.2,0.2);
	_2d.drawImage(this, 0, 800);/*drawImage(img,x,y)*/


}
</script>
</body>
</html>

　　

【canvas】Demo2 translate移动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片</title>
</head>
<body>

<canvas id="wapper" width="1000" height="1000"></canvas>

<script>
var wapper = document.getElementById('wapper'),
	_2d = wapper.getContext('2d');/*2d的绘制对象*/

_2d.fillRect(10,10,100,50);
_2d.translate(70,70);
_2d.fillRect(10,10,100,50);

</script>
</body>
</html>

　　

【canvas】Demo3 rotate旋转

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>rotate</title>
</head>
<body>

<canvas id="wapper" width="1000" height="1000"></canvas>

<script>
var wapper = document.getElementById('wapper'),
	_2d = wapper.getContext('2d');/*2d的绘制对象*/

_2d.fillRect(50,50,100,50);
_2d.rotate(10*Math.PI/180);/*以画布0.0为中心的旋转*/
_2d.fillRect(50,50,100,50);
</script>
</body>
</html>

　　

posted @ 2015-04-20 18:17  dtdxrk  阅读(602)  评论(0)    收藏  举报