箭头随着手指滑动而旋转（一）

一、需求：

用canvas来实现一个箭头随着手指滑动而旋转

二、思路：

1.首先要写一个canvas绘制箭头的函数

2.写一个获取当前触摸点的坐标的函数

3.初始化箭头函数

4.随着触摸点的不停变化，获取到当前触摸点和箭头中心点的角度，然后用canvas不停绘制箭头

三、代码实现

1. arrow.js

function Arrow(){
    this.x=0;
    this.y=0;
    this.color="#ff0";
    this.rotation=0;    
}
Arrow.prototype.draw=function(context){
    context.save();
    context.translate(this.x,this.y);
    context.rotate(this.rotation);
    context.lineWidth=2;
    context.fillStyle=this.color;
    context.beginPath();
    context.moveTo(-50,-25);
    context.lineTo(0,-25);
    context.lineTo(0,-50);
    context.lineTo(50,0);
    context.lineTo(0,50);
    context.lineTo(0,25);
    context.lineTo(-50,25);
    context.lineTo(-50,-25);
    context.fill();
    context.stroke();
    context.restore();
}

　　2.utils.js

var utils={
    captureMouse:function(element){
        var mouse={x:0,y:0};
        element.addEventListener("mousemove",function(e){
            var x,y;
            if(e.pageX||e.pageY){
                x=e.pageX;
                y=e.pageY;
            }else{
                x=e.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);
                y=e.clientX+(document.documentElement.scrollTop||document.body.scrollTop);
            }
            x-=element.offsetLeft;
            y-=element.offsetTop;
            mouse.x=x;
            mouse.y=y;
        },false);
        return mouse;
    },
    captureTouch:function(element){
        var touch={x:null,y:null,isPressed:false}
        element.addEventListener("touchstart",function(e){
            touch.isPressed=true;
        },false);
        element.addEventListener("touchmove",function(e){
            var x,y,
            event=e.touches[0];
             
            if(event.pageX||event.pageY){
                x=event.pageX;
                y=event.pageY;
            }else{
                x=event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);
                y=event.clientY+(document.documentElement.scrollTop||document.body.scrollTop);
            }
            x-=element.offsetLeft;
            y-=element.offsetTop;
            touch.x=x;
            touch.y=y;
        },false);
        element.addEventListener("touchend",function(e){
            touch.isPressed=false;
        },false);
        return touch;
    }
}

　　3.inde.js

document.addEventListener("touchmove",function(e){
        e.preventDefault();
       },false);
        var canvas=document.querySelector("#canvas");
        canvas.width=document.documentElement.clientWidth||document.body.clientWidth;
        canvas.height=document.documentElement.clientHeight||document.body.clientHeight;
        var context=canvas.getContext("2d");
        var mouse=utils.captureTouch(canvas);
        var arrow=new Arrow();
        arrow.x=canvas.width/2;
        arrow.y=canvas.height/2;
        (function drawFrame(){
            window.requestAnimationFrame(drawFrame,canvas);
            context.clearRect(0,0,canvas.width,canvas.height);
            var dx=mouse.x-arrow.x,
                dy=mouse.y-arrow.y;
                arrow.rotation=Math.atan2(dy,dx);
                arrow.draw(context);
        })();

　　4.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            html,body{
                height: 100%;
                width:100%;
                overflow: hidden;
            }
            body,canvas{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
    </body>
    <script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/arrow.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>