찾다

집 >웹 프론트엔드 >H5 튜토리얼 >HTML5 Canvas_html5 튜토리얼 스킬을 통해 이미지의 이동 및 회전 변경을 구현하는 방법에 대한 자세한 설명

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

WBOY
WBOY원래의
2016-05-16 15:45:252854검색

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

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

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >  
  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>  

运行结果：
2016322112903186.jpg (850×500)

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

注意使用状态保存：

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

JavaScript 코드复复内容到剪贴板
  1.   
  2. "zh">   
  3.   
  4.     "UTF-8">   
  5.     平移变换   
  6.        
  7.   
  8.   
  9. "canvas-warp">   
  10.     "canvas">   
  11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  12.        
  
  •   
  • <스크립트>   
  •     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);   
  •   
  •     };   
  •   
  •   
  •   

    • 运行结果：
    2016322113015232.jpg (850×500)

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

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

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

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

    具体使用如下。

    JavaScript 코드复复内容到剪贴板
    1.   
    2. "zh">   
    3.   
    4.     "UTF-8">   
    5.     平移变换   
    6.        
    7.   
    8.   
    9. "canvas-warp">   
    10.     "canvas">   
    11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    12.        
      
  •   
  • <스크립트>   
  •     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();   
  •   
  •     };   
  •   
  •   
  •   

    • 运行结果：
    2016322113053867.jpg (850×500)

    因此, 使用图形变换的时候, 要记得结使用状态保存。


    旋转变换rotate()

    동일하게 회전(deg)하여 회전(도)할 수 없습니다.圆心进行的顺时针旋转。所以，使userotate() 配前，일반적으로 常需要配合使用translate()平移坐标系，确定旋转的圆心 。即，旋转变换通常搭配平移变换매우 유용합니다.

    最后一点需要注의심있는是, Canvas是基于状态的绘是, 所以每次旋转city, 是接着上次旋转的基础上继续旋转, 所以에서 저장() 및 복원() 방식을 사용하는 형식은 다음과 같습니다. ，일방면 겹침 旋转角，另 一 方 면 겹 置 坐 标 系 原点 。

    JavaScript 코드复复内容到剪贴板
    1.   
    2. "zh">   
    3.   
    4.     "UTF-8">   
    5.     旋转变换   
    6.        
    7.   
    8.   
    9. "canvas-warp">   
    10.     "canvas">   
    11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    12.        
      
  •   
  • <스크립트>   
  •     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);   
  •   
  •   
  •         용(var i = 0; i <= 12; i ){   
  •             context.save();   
  •             context.translate(70   i * 50, 50   i * 40);   
  •             context.fillStyle = "#00AAAA";   
  •             context.fillRect(0,0,20,20);   
  •             context.restore();   
  •   
  •             context.save();   
  •             context.translate(70   i * 50, 50   i * 40);   
  •             context.rotate(i * 30 * Math.PI / 180);   
  •             context.fillStyle = "빨간색";   
  •             context.fillRect(0,0,20,20);   
  •             context.restore();   
  •         }   
  •   
  •     };   
  •   
  •   
  •   

    • 运行结果：
    2016322113132491.jpg (850×500)

    14개 수정 형식, 其中蓝Color是旋转前의 수정 형식, 红color是旋转后의 수정 형식에 대한 사용이 가능합니다.旋转。每次绘제토被save( )与restore()包裹起来，每次旋转前文移动了坐标系。妙了。

    성명：
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    이전 기사：HTML5 터치 이벤트 진화 탭 이벤트 소개_html5 튜토리얼 기술다음 기사：HTML5 터치 이벤트 진화 탭 이벤트 소개_html5 튜토리얼 기술

    관련 기사

    더보기