详解通过HTML5 Canvas实现图片的平移及旋转变化的方法_html5教程技巧

平移变换translate()
平移变换，故名思议，就是一般的图形位移。比如这里我想将位于（100，100）的矩形平移至（200，200）点。那么我只要在绘制矩形之前加上context.translate(100,100)即可。

这里的translate()只传入两个参数，其实就是新画布坐标系原点的坐标。下面结合代码来看看效果。

XML/HTML Code复制内容到剪贴板

1. nbsp;html>  
2. html lang="zh">  
3. head>  
4.     meta charset="UTF-8">  
5.     title>平移变换title>  
6.     style>  
7.         body { background: url("./images/bg3.jpg") repeat; }   
8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
9.     style>  
10. head>  
11. body>  
12. div id="canvas-warp">  
13.     canvas id="canvas">  
14.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
15.     canvas>  
16. div>  
17.   
18. script>  
19.     window.onload = function(){   
20.         var canvas = document.getElementById("canvas");   
21.         canvas.width = 800;   
22.         canvas.height = 600;   
23.         var context = canvas.getContext("2d");   
24.         context.fillStyle = "#FFF";   
25.         context.fillRect(0,0,800,600);   
26.   
27.         context.fillStyle = "#00AAAA";   
28.         context.fillRect(100,100,200,100);   
29.   
30.         context.fillStyle = "red";   
31.         context.translate(100,100);   
32.         context.fillRect(100,100,200,100);   
33.   
34.     };   
35. script>  
36. body>  
37. html>  

运行结果：

这里的蓝色矩形，是矩形原来的位置，然后调用translate()方法，将矩形位移至（200，200），即红色矩形的位置。我们来用一张图看看，它是怎么做到平移变换的。

没错，其实这里的平移变换实质就是在平移坐标系，而对translate()传入的参数，实质就是新坐标系相对于旧坐标系的原点。这使得我们依旧是在（100，100）绘制的红色矩形，在平移坐标系之后，变到了（200，200）处。

注意使用状态保存：
其实这里有一个坑，我们如果想把矩形平移至（300，300）怎么办呢？或许我们会想，直接调用context.translate(200,200)就可以了。好，我们看看效果。

JavaScript Code复制内容到剪贴板

1. nbsp;html>   
2. "zh">   
3.   
4.      "UTF-8">   
5.        
6.     
7.         body { background: url("./images/bg3.jpg") repeat; }  
8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
9.        
10.   
11.   
12. "canvas-warp">   
13.     "canvas">   
14.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
15.        

  

  

<script> </script>

    window.onload = function(){   

        var canvas = document.getElementById("canvas");   

        canvas.width = 800;   

        canvas.height = 600;   

        var context = canvas.getContext("2d");   

        context.fillStyle = "#FFF";   

        context.fillRect(0,0,800,600);   

  

        context.fillStyle = "#00AAAA";   

        context.fillRect(100,100,200,100);   

  

        context.fillStyle = "red";   

        context.translate(100,100);   

        context.fillRect(100,100,200,100);   

  

        context.fillStyle = "green";   

        context.translate(200,200);   

        context.fillRect(100,100,200,100);   

  

    };