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