canvas_16 平移与旋转
效果图：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <style type="text/css"> 8 canvas { 9 border: 1px solid #eee; 10 } 11 </style> 12 <body> 13 <canvas id="cvs" height="500" width="500"></canvas> 14 15 <script type="text/javascript"> 16 var canvas = document.querySelector("#cvs"); 17 var ctx = canvas.getContext("2d"); 18 19 // (100, 100)坐标旋转的话 20 var deg = 0; 21 setInterval(function() { 22 ctx.clearRect(0, 0, canvas.width, canvas.height); 23 24 ctx.beginPath(); 25 ctx.fillStyle = "blue"; 26 ctx.fillRect(100, 100, 100, 100); 27 28 ctx.beginPath(); 29 ctx.moveTo(300, 200); 30 ctx.lineTo(350, 100); 31 ctx.lineTo(400, 200); 32 ctx.closePath(); 33 ctx.fill(); 34 ctx.save(); 35 36 deg += 0.1; 37 ctx.beginPath(); 38 // 目的坐标的中心点旋转的话 39 ctx.translate(150, 150); 40 ctx.rotate(deg); 41 ctx.fillStyle = "orange"; 42 ctx.fillRect(-50, -50, 100, 100); 43 ctx.restore(); 44 45 ctx.save(); 46 ctx.translate(350, 100); 47 // 绕着 translate 的点旋转 48 ctx.rotate(deg); 49 ctx.beginPath(); 50 ctx.moveTo(-50, 100); 51 ctx.lineTo(0, 0); 52 ctx.lineTo(50, 100); 53 ctx.fillStyle = "orange"; 54 ctx.closePath(); 55 ctx.fill(); 56 ctx.restore(); 57 }, 50) 58 </script> 59 </body> 60 </html>
