canvas 怎么让一张图片往鼠标点击方向移动

canvas 怎么让一张图片往鼠标点击方向移动，直到超出canvas画布

8 个解决方案

#1

给canvas添加事件监听，把图片放到容器里面，调整xy坐标？

#2

我想实现坦克发射炮弹 炮弹飞向我鼠标点击的方向

#3

引用 2 楼 killeryei 的回复:

我想实现坦克发射炮弹 炮弹飞向我鼠标点击的方向

你是那点不会？

#4

引用 3 楼 jslang 的回复:

Quote: 引用 2 楼 killeryei 的回复:

我想实现坦克发射炮弹 炮弹飞向我鼠标点击的方向

你是那点不会？

就是炮弹飞向鼠标的方向 每一帧的坐标怎么获取

#5

引用 4 楼 killeryei 的回复:

Quote: 引用 3 楼 jslang 的回复:

Quote: 引用 2 楼 killeryei 的回复:

我想实现坦克发射炮弹 炮弹飞向我鼠标点击的方向

你是那点不会？

就是炮弹飞向鼠标的方向 每一帧的坐标怎么获取

ox oy是子弹初始坐标
ex ey是鼠标点击的坐标
d 是子弹每帧移动的速度
用下面公式得出的 vx vy 就是子弹每帧移动的偏移量
var r = Math.atan2(ex-ox, ey-oy);
var vx = Math.sin(r)*d;
var vy = Math.cos(r)*d;

#6

可以了 谢谢，就是有些方向稍微有些偏差
http://sandbox.runjs.cn/show/quwak7of

#7

引用 6 楼 killeryei 的回复:

可以了 谢谢，就是有些方向稍微有些偏差
http://sandbox.runjs.cn/show/quwak7of

+(function ($) {
    var then = Date.now();
    var keysDown = [];
    var main = function () {
        this.i = 0;
        var _this = this; //保存当前对象main
        this.canvas = document.getElementById("myCanvas");
        this.ctx = this.canvas.getContext("2d");
        this.canvas.width = 800;
        this.canvas.height = 600;

        this.delta = 0;
        this.modifier = 0;

        this.mouse_x=0;
        this.mouse_y=0;
        //角色
        this.hero = {
            speed: 256 // movement in pixels per second
        };
        this.heroReady = false;
        this.heroImage = new Image();
        this.heroImage.src = "http://sandbox.runjs.cn/uploads/rs/479/8n4ga7bl/hero.png";
        this.heroImage.onload = function () {
            _this.heroReady = true;
        };
        //炮弹
        this.bullet = {
            speed: 256 // movement in pixels per second
        };
        //炮弹坐标数组
        this.bulletxy = [];
        //炮弹初始面对方向
        this.direction = "up";
        addEventListener("keydown", function (e) {
            keysDown[e.keyCode] = true;
            if (32 in keysDown) {
                _this.launch(_this);
                _this.i++;
            }
        }, false);
        addEventListener("keyup", function (e) {
            delete keysDown[e.keyCode];
            //_this.i = 1;
        }, false);
        $('#myCanvas').mousedown(function(e){
            if(1 == e.which){
		        var od = $(this).offset();
	            _this.mouse_x = e.pageX - od.left;
	            _this.mouse_y = e.pageY - od.top;
	            console.log(_this.mouse_x+":"+_this.mouse_y);
                _this.launch(_this);
            }
        })
        _this.reset(_this);
        loop(_this);

    }
    main.prototype = {
        oper: function (_this) {
            if (38 in keysDown) {
                _this.hero.y -= _this.hero.speed * _this.modifier;
                _this.direction = "up";
            }
            if (40 in keysDown) {
                _this.hero.y += _this.hero.speed * _this.modifier;
                _this.direction = "down";
            }
            if (37 in keysDown) {
                _this.hero.x -= _this.hero.speed * _this.modifier;
                _this.direction = "left";
            }
            if (39 in keysDown) {
                _this.hero.x += _this.hero.speed * _this.modifier;
                _this.direction = "right";
            }

        },
        render: function (_this) {
            _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
            if (_this.heroReady) {
                _this.ctx.drawImage(_this.heroImage, _this.hero.x-16, _this.hero.y-16);

            }
            for (var i = 0; i <= _this.bulletxy.length - 1; i++) {
                if (_this.bulletxy[i][1] < -50) {
                    continue;
                }
                _this.ctx.save();
                _this.ctx.beginPath();//开始路径
                _this.ctx.fillStyle = 'red';//颜色
                //_this.ctx.fillRect(_this.bulletxy[i][0], _this.bulletxy[i][1], 8, 8);//用矩形表示子弹
                _this.ctx.arc(_this.bulletxy[i][0], _this.bulletxy[i][1], 5, 0, Math.PI * 2, true);//用圆型
                _this.ctx.closePath();//闭合路径
                _this.ctx.fill();
                _this.ctx.restore();
            }

        },
        reset: function (_this) {
            _this.hero.x = _this.canvas.width / 2;
            _this.hero.y = _this.canvas.height / 2;
        },
        launch: function (_this) {
            //初始炮弹坐标
            _this.bulletxy.push([_this.hero.x, _this.hero.y]);
            var num = _this.bulletxy.length - 1;
            var id;

            var r = Math.atan2(_this.mouse_x-_this.hero.x, _this.mouse_y-_this.hero.y);

            id = setInterval(function () {
                _this.bulletxy[num][0] = _this.bulletxy[num][0]+Math.sin(r)*(_this.bullet.speed * _this.modifier);
                _this.bulletxy[num][1] = _this.bulletxy[num][1]+Math.cos(r)*(_this.bullet.speed * _this.modifier);
                if (_this.bulletxy[num][1] <= -50) {
                    clearInterval(id);
                }
            }, 50)


        }
    }
    var loop = function (_this) {
        var now = Date.now();
        _this.delta = now - then;
        then = now;
        _this.modifier = _this.delta / 1000;
        main.prototype.oper(_this);
        main.prototype.render(_this);
        requestAnimationFrame(function () {
            loop(_this)
        });
    };


// 注册全局变量
    window.main = main;
    requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame;

})(jQuery);

#8

 知道原因了 谢谢