【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>
123
123
123
123
123
123
123
123
123
123
123
123
123
123
时间： 2024-03-07 23:19:44