詳解透過HTML5 Canvas實現圖片的平移及旋轉變化的方法_html5教學技巧

平移變換translate()
平移變換，故名思議，就是一般的圖形位移。例如這裡我想將位於（100，100）的矩形平移至（200，200）點。那我只要在繪製矩形之前加上context.translate(100,100)即可。

這裡的translate()只傳入兩個參數，其實就是新畫布座標係原點的座標。下面結合程式碼來看看效果。

XML/HTML Code複製內容到剪貼簿

1. html>  
2. html lang="zh" >  
3. 頭>  
4.     元 字符集 字符集 字符集
 
5. 字符集 字符集 字符集 字符集>  
6.     標題>平移變身
>
7.   
8.     
樣式>           正文 { 背景： url("./images/bg3.jpg") 重複； }   
9.         #canvas { 邊框： 1px solid #aaaaaa; 顯示：區塊； 邊距：50px 自動； }      樣式>
10.   頭
>
11.    身體>  
div id=id=id=id=
12. id=id=id=id=id> ">       畫布 id="畫布" >           你的瀏覽器居然不支援Canvas？ ！趕緊換一個吧！ ！  
13.     畫布> 
14. div>  
  
16. 腳本>  
    
17. window.onload = 函數(){🎜>函數(){  >
18.         var 畫布 =         canvas.width
 = 
19. 800 = 800 =          canvas.height = 
        var 情境 = canvas        
20. context.fillStyle =          context.fillRect(0,0,800,600);      
21.         context.fillStyle = "#00AAAAAAA         context.fillRect(100,100,200,100);   
22.   
23.         
24. context.fillStyle =          context.translate(100,100);            context.fillRect(100,100,200,100);   
25.   
26.     }；   
27. 腳本>  
29. 身體
30. >  
32. html>  
33. 運行結果： 這裡的藍色擬合，是原來的位置，然後呼叫translate()方法，將預估非線性至（200，200），即紅色擬合的位置。我們來用一張圖看看，它是怎麼退出now直播帳號。實作平移變換的。 其實，其實這裡的平移變換外觀就是在平移座標系，而對translate()建立的參數，實質就是新座標系相對於舊座標系的原點。這使得我們依然在（100， 100）膚色的膚色，在平移座標系之後，變到了（200，200）處。 注意使用狀態保存：
其實這裡有個坑，我們想如果把曲線平移至（300，300）怎麼辦呢？也許我們會想，直接呼叫context.translate(200,200)就可以了。好，我們看看效果。
34. JavaScript 程式碼 將內容複製到剪切板
    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.        
      
35.   
36.   
37.     window.onload = 函數(){   
38.         var canvas = document.getElementById("   
        canvas.width = 800;   
        canvas.height = 600;   
        
41. var context = canvas.getContext("2d"            context.fillStyle = 
42. "#FFF";            context.fillRect(0,0,800,600);   
43.   
44.         context.fillStyle = 
45. "#00AAAA";            context.fillRect(100,100,200,100);   
46.   
47.         context.fillStyle = 
48. 「紅色」;            context.translate(100,100);   
49.         context.fillRect(100,100,200,100);   
50.   
51.         context.fillStyle = 
52. "綠色";            context.translate(200,200);   
53.         context.fillRect(100,100,200,100);   
54.   
55.     }；   
56. 腳本>   
57.   
58.   

運行結果：

這裡的綠色方程式並沒有如我們所願在（300，300）位置處，而是跑到了（400，400）這裡。值值。兩個一個方法。 第一，每次使用完成轉換之後，記得將座標系平移回原點，即呼叫translate(-x,-y)。

第二個，每次平移前都使用context.save()，每次螢光之後，使用context.restore()。

切記，千萬不要再想著我緊繼續連接第一次平移之後再平移翻譯(100,100)不就行了，這樣你自己的坐標係就會亂套，根本找不到自己的坐標係原在點其中，在多次變換或封裝函數之後，會坑死你。的時候，要這麼處理，而不僅僅是平移變換。

具體使用如下。

JavaScript 程式碼

將內容複製到剪切板

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.        

  

  

  

    window.onload = 函數(){   

        var canvas = document.getElementById("   

        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.save();   

        context.fillStyle = 

「紅色」;            context.translate(100,100);   

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

        context.restore();   

  

        context.save();   

        context.fillStyle = 

"綠色";            context.translate(200,200);   

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

        context.restore();   

  

    }；   

腳本>   

  

  

運行結果：