Detailed explanation of how to realize translation and rotation changes of images through HTML5 Canvas_html5 tutorial skills

Translation transformation translate()
Translation transformation, hence the name, is a general graphics displacement. For example, here I want to translate the rectangle located at (100, 100) to the point (200, 200). Then I just need to add context.translate(100,100) before drawing the rectangle.

The translate() here only passes in two parameters, which are actually the coordinates of the origin of the new canvas coordinate system. Let’s take a look at the effect with the code below.

XML/HTML CodeCopy content to clipboard

1. 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);   

  

    };