canvas之图形的变化（平移缩放旋转）(2)_H5之家 - 中国HTML5教程资源分享第一站

也即是

则：

context.transform(Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180),

-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),0,0）可以替代context.rotate(θ)。

也可以使用

context.transform(-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),

Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180), 0,0）替代。

eg: context.transform(0.95,0,0,0.95,30,30); 可以替代 context.translate(30,30); context.scale(0.95.0.95);

setTransform方法用于将当前的变化矩阵重置为最初的矩阵，然后以相同的参数调用transform方法，即先set（重置），再transform（变换）

用法： context.setTransform(m11,m12,m21,m22,dx,dy);

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{padding: 0;margin:0;} 8 body{background: #1b1b1b;} 9 #div1{margin:50px auto; width:300px; height: 300px;} 10 canvas{background: #fff;} 11 </style> 12 <script type="text/javascript"> 13 window.onload = function(){ 14 draw(); 15 }; 16 17 function draw(){ 18 var c = document.getElementById('myCanvas'); 19 var ctx = c.getContext('2d'); 20 ctx.translate(200,20); 21 22 for(var i=0; i<80; i++){ 23 ctx.save(); 24 ctx.transform(0.95,0,0,0.95,30,30); 25 ctx.rotate(Math.PI/12); 26 ctx.beginPath(); 27 ctx.fillStyle = 'red'; 28 ctx.globalAlpha = '0.4'; 29 ctx.arc(0,0,50,0,Math.PI*2,true); 30 ctx.closePath(); 31 ctx.fill(); 32 } 33 34 ctx.setTransform(1,0,0,1,10,10); //将前面的矩阵恢复为最初的矩阵，即恢复最初的原点，然后将坐标原点改为(10,10),并以新的坐标绘制一个蓝色的矩形 35 ctx.fillStyle = 'blue'; 36 ctx.fillRect(0,0,50,50); 37 ctx.fill(); 38 39 } 40 </script> 41 </head> 42 <body> 43 <div> 44 <canvas></canvas> 45 </div> 46 </body> 47 </html>

效果显示：

canvas之图形的变化（平移 缩放 旋转）(2)

canvas之图形的变化（平移缩放旋转）(2)