찾다

집 >웹 프론트엔드 >H5 튜토리얼 >html5 캔버스는 마우스 회전_html5 튜토리얼 기술을 따르는 화살표를 구현합니다.

html5 캔버스는 마우스 회전_html5 튜토리얼 기술을 따르는 화살표를 구현합니다.

WBOY
WBOY원래의
2016-05-16 15:51:422812검색

이 기사의 예는 모든 사람과 공유됩니다

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >
  2. <html>
  3. <머리>
  4. <메타 문자 집합="utf- 8" />
    5. " X-ua 호환 "
  5. 콘텐츠 = " ie = edge " /// > <제목>캔버스는 마우스 회전을 따르는 화살표를 구현합니다 < ; /
    6. 제목
  6. >  <스타일>
    7. *{패딩: 0; 여백: 0}
  7.  스타일>
    8.  
  9. 머리>
  10. <몸>
  11. <캔버스 너비=
    12. "500"
  12. 높이="500" 스타일="테두리: 1px 솔리드 #555; 디스플레이: 블록;여백: 0 자동;">캔버스 >  <스크립트>
    13. var
  13. 화살표=함수 () {
    14.  
  14. this.x=0; 
  15. this.y=0;  
    16. this.color
  16. ="#f90"  
    17. this.rolation
  17. =0;  }    
  18.         var 캔버스=문서.querySelector('canvas')   
  19.         var ctx=캔버스.getContext('2d');   
  20.         arrow.prototype.draw=기능 (ctx) {   
  21.            ctx.save();   
  22.             ctx.translate(this.x,this.y);   
  23.             ctx.rotate(this.rolation)   
  24.             ctx.fillStyle=이것.color;   
  25.            ctx.beginPath();   
  26.             ctx.moveTo(0, 15);   
  27.             ctx.lineTo(-50, 15);   
  28.             ctx.lineTo(-50, -15);   
  29.             ctx.lineTo(0,-15);   
  30.             ctx.lineTo(0,-35);   
  31.            ctx.lineTo(50,0);   
  32.             ctx.lineTo(0,35);   
  33.             ctx.closePath()   
  34.            ctx.fill();   
  35.            ctx.restore();   
  36.         }   
  37.         var 화살표=new 화살표();   
  38.         Arrow.x=캔버스.width/2;   
  39.         Arrow.y=캔버스.height/2;   
  40.            
  41.         var c_x,c_y; //상상对于캔버스坐标的位置;   
  42.         var isMouseDown=false;   
  43.         Arrow.draw(ctx)   
  44.         canvas.addEventListener('mousedown',function(e) {   
  45.             isMouseDown=true;   
  46.         },거짓)   
  47.         canvas.addEventListener('mousemove',function(e) {   
  48.             if(isMouseDown==true){   
  49.                c_x=getPos(e).x-canvas.offsetLeft;   
  50.                c_y=getPos(e).y-canvas.offsetTop;   
  51.                //setInterval(drawFram,1000/60)   
  52.                 requestAnimationFrame(drawFram)   
  53.             }   
  54.         },false)   
  55.         canvas.addEventListener('mouseup',function(e) {   
  56.             isMouseDown=false;   
  57.         },false)   
  58.         함수 drawFram(){   
  59.             var dx=c_x-Arrow.x;   
  60.             var dy=c_y-Arrow.y;   
  61.             Arrow.rolation=수학.atan2(dy,dx);   
  62.             ctx.clearRect(0,0,canvas.width,canvas.height);   
  63.             Arrow.draw(ctx)   
  64.         }   
  65.         함수 getPos(e) {   
  66.             var 마우스={x:0,y:0}   
  67.             var ee=e||event;   
  68.         
  69.             if(e.pageX||e.pageY){   
  70.                mouse.x=e.pageX;   
  71.                mouse.y=e.pageY;   
  72.             }그렇지 않으면{
  73. mouse.x=e.pageX document.body.scrollLeft document.document.documentElement.scrollLeft
  74. mouse.y=e.pageY document.body.scrollTop document.document.documentElement.scrollTop
  75.                                                     
    76. 마우스 반환
    77.                                                        
  77.  
    78. 스크립트>  몸> html> 데모 주소:
http://codepen.io/jonechen/pen/eZpgWd

말도 안 돼요. 바로 데모로 가보겠습니다. 이 효과는 달성하기 어렵지 않지만 참새만큼 작으며 관련된 주요 지식 포인트는 다음과 같습니다. 1. 캔버스의 기본 그리기

3. js 애니메이션

4. 캔버스에서 기본 적용;

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.


원문:
http://www.cnblogs.com/jone-chen/p/5243439.html

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

관련 기사

더보기