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

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

WBOY

풀어 주다： 2016-05-16 15:51:42

원래의

2781명이 탐색했습니다.

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

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

>
<html>
<머리>
<메타 문자 집합="utf- 8" />
콘텐츠 = " ie = edge " /// > <제목>캔버스는 마우스 회전을 따르는 화살표를 구현합니다 < ; /
> <스타일>
스타일>
머리>
<몸>
<캔버스 너비=
높이="500" 스타일="테두리: 1px 솔리드 #555; 디스플레이: 블록;여백: 0 자동;">캔버스 > <스크립트>
화살표=함수 () {
this.x=0;
this.y=0;
="#f90"
=0; }
var 캔버스=문서.querySelector('canvas')
var ctx=캔버스.getContext('2d');
arrow.prototype.draw=기능 (ctx) {
ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.rolation)
ctx.fillStyle=이것.color;
ctx.beginPath();
ctx.moveTo(0, 15);
ctx.lineTo(-50, 15);
ctx.lineTo(-50, -15);
ctx.lineTo(0,-15);
ctx.lineTo(0,-35);
ctx.lineTo(50,0);
ctx.lineTo(0,35);
ctx.closePath()
ctx.fill();
ctx.restore();
}
var 화살표=new 화살표();
Arrow.x=캔버스.width/2;
Arrow.y=캔버스.height/2;
var c_x,c_y; //상상对于캔버스坐标的位置;
var isMouseDown=false;
Arrow.draw(ctx)
canvas.addEventListener('mousedown',function(e) {
isMouseDown=true;
},거짓)
canvas.addEventListener('mousemove',function(e) {
if(isMouseDown==true){
c_x=getPos(e).x-canvas.offsetLeft;
c_y=getPos(e).y-canvas.offsetTop;
//setInterval(drawFram,1000/60)
requestAnimationFrame(drawFram)
}
},false)
canvas.addEventListener('mouseup',function(e) {
isMouseDown=false;
},false)
함수 drawFram(){
var dx=c_x-Arrow.x;
var dy=c_y-Arrow.y;
Arrow.rolation=수학.atan2(dy,dx);
ctx.clearRect(0,0,canvas.width,canvas.height);
Arrow.draw(ctx)
}
함수 getPos(e) {
var 마우스={x:0,y:0}
var ee=e||event;
if(e.pageX||e.pageY){
mouse.x=e.pageX;
mouse.y=e.pageY;
}그렇지 않으면{
mouse.x=e.pageX document.body.scrollLeft document.document.documentElement.scrollLeft
mouse.y=e.pageY document.body.scrollTop document.document.documentElement.scrollTop