To be or not to be.That is a question!

---源于莎士比亚的《哈姆雷特》

导航

Rotation Canvas 

<!DOCTYPE HTML>
<html dir="ltr" lang="zh-CN">
<head>
    <meta charset="utf-8"> 
    <title></title>
    <script type="text/javascript" src="utils.js"></script>
    <script type="text/javascript" src="arrow.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script type="text/javascript">
        /**
         * radians=degrees*Math.PI/180
         * degrees=radians*180/Math.PI
         */
        window.onload=function(){
            var canvas=document.getElementById('canvas'),
                context=canvas.getContext('2d');
                mouse=utils.captureMouse(canvas);
                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);
            }())
        }
    </script>
</body>
</html>
/**
 * [utils description]
 * @type {Object}
 */
var utils={};
utils.captureMouse=function(element){
    var mouse={x:0,y:0};
    element.addEventListener('mousemove',function(event){
        var x,y;
        if(event.pageX || event.pageY){
            x=event.pageX;
            y=event.pageY;
        }else{
            x=event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
            y=event.clientY=document.body.scrollTop+document.documentElement.scrollTop;
        }
        x-=element.offsetLeft;
        y-=element.offsetTop;

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

        touch.x=x;
        touch.y=y;
    },false);
    return touch;
}
/**
 * [Arrow description]
 */
function Arrow(){
    this.x=0;
    this.y=0;
    this.color="#ffff00";
    this.rotation=0;
}
Arrow.prototype.draw=function(context){
    context.save();
    context.translate(this.x,this.y);
    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.closePath();
    context.fill();
    context.stroke();
    context.restore();
}

 

posted on 2013-06-04 12:22  Ijavascript  阅读(252)  评论(0)  编辑  收藏  举报