【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>