HTML5 Canvas_html5 튜토리얼 스킬을 통해 이미지의 이동 및 회전 변경을 구현하는 방법에 대한 자세한 설명

번역 변환()
번역 변환, 즉 이름에서 따온 것은 일반적인 그래픽 치환입니다. 예를 들어 여기서는 (100, 100)에 위치한 직사각형을 (200, 200) 지점으로 이동하고 싶습니다. 그런 다음 사각형을 그리기 전에 context.translate(100,100)을 추가하면 됩니다.

여기서translate()는 실제로 새 캔버스 좌표계의 원점 좌표인 두 개의 매개변수만 전달합니다. 아래 코드를 통해 효과를 살펴보겠습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. html>  
2. html lang="zh" >  
3. 머리>  
4.     메타 문자 집합="UTF- 8">  
5.     제목>平移变换제목>  
6.     스타일>  
7.         본문 { 배경: url("./images/bg3.jpg") 반복; }   
8.         #canvas { 테두리: 1px solid #aaaaaa; 디스플레이: 차단; 여백: 50px 자동; }   
9.     스타일>  
10. 머리>  
11. 몸>  
12. div id="canvas- 워프">  
13.     캔버스 id="캔버스" >  
14.         이런 것은 캔버스가 아니죠?！赶快换一个吧！！  
15.     캔버스>  
16. div>  
17.   
18. 스크립트>  
19.     window.onload = 함수(){   
20.         var 캔버스 = 문서.getElementById("canvas");   
21.         canvas.width = 800;   
22.         canvas.height = 600;   
23.         var 컨텍스트 = 캔버스.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 = "빨간색";   
31.         context.translate(100,100);   
32.         context.fillRect(100,100,200,100);   
33.   
34.     };   
35. 스크립트>  
36. 몸>  
37. html>  

运行结果：

다른 모양의 색상, 是矩 모양의 원래 개체, 然后调사용translate()방법, 将矩형태의 位移至(200,200), 即红색깔 모양의 개체입니다. ，它是怎么做到平移变换的。

注意使用状态保存：

其实这里有一个坑，我们如果想把矩shape平移至（300，300）怎么办呢?或许我们会想，直接调사용context.translate(200,200)就可以了。好，我们看看效果。

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");   

        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 = "빨간색";   

        context.translate(100,100);   

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

  

        context.fillStyle = "녹색";   

        context.translate(200,200);   

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

  

    };   

  

  

  

运行结果：

여기에 있는 색색깔의 색종이는 우리에게 있습니다(300,300)位置处,而是跑到了(400,400)这里.为什么呢?想必大家已经知道了答案——Canvas是基于状态的绘제 。我们第一次平移之后，坐标系已经在（100，100）处了，所以如果继续平移，这个再基于新坐标系继续平移坐标系。那么要怎么去解决呢?很简单，有两个방법입니다.

第一，在每次使用完变换之后，记得将坐标系平移回原点，即调用translate(-x,-y)。

제2, 현재 사용 중인 context.save(), 사용 중인 context.save(), 사용 중인 context.restore().

切记，千万不要再想着我继续紧接着第一次平移之后再平移translate(100,100)不就行了，这样你自己的坐标系就乱套，根本找不到自己的坐标系原点에서哪，多次变换或者封装函数之后，会坑死你。所以一定要以最初状态为最根本的参根要，这是原则性问题。这里我建议使涉及所有图shape变换 사용 용도的时候，city要这么处理，不仅仅是平移变换。

具体使用如下。

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");   

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

  

    };