詳解透過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.   
    2. "zh">   
    3.   
    4.     "UTF-8">   
    5.        
    6.        
    7.   
    8.   
    9. "canvas-warp">   
    10.     "canvas">   
    11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    12.        
      
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. 腳本>