canvas 绘制跟随鼠标移动的线条

坦克大作战游戏中常见,点击某点,坦克的枪口会自动对准被点击的点!
window.onload = function() {
        var canvas = document.getElementById("canvas");
        var obj = canvas.getContext('2d');
    
        obj.moveTo( 300, 500);
        obj.lineTo( 300, 480);
        obj.lineWidth = 6;
        obj.strokeStyle = "#ff0000";
        obj.stroke();
        
        canvas.onmousedown = function( e ){
            var mx = e.layerX;
            var my = e.layerY;
            
            var sx = 300;
            var sy = 500;
            
            var angle = Math.atan2( ( my - sy), ( mx - sx ) )
            
            obj.clearRect(0, 0, 600, 600);
            obj.beginPath();
            obj.moveTo( sx, sy );
            obj.lineTo( sx + 20 * Math.cos( angle ), sy + 20 * Math.sin(angle));
            obj.stroke();
        };
    };

  

posted @ 2016-08-08 21:34  yugl  阅读(7957)  评论(0编辑  收藏  举报