画布如何旋转图像和重新绘制而不旋转整个上下文
Canvas how to rotate image and redraw without rotating the entire context
我正试图用帆布和JS重新创建小行星,并且我根据它的角度旋转船有麻烦。我已经测试了计算角度和转换为弧度的方法,并且他们检查,并且在draw()中调用时定义了角度,但旋转没有发生。当我可以进行一些旋转时,它会旋转整个上下文,而不是船。
我已经包含了整个ship类,但是相关的函数是底部的draw函数。
function Ship(posOptions) {
let options = {game: posOptions['game'], color: 'green', pos: posOptions['pos'], radius: 20, vel: [0,0], wrappable: true, type: 0}
MovingObject.call(this, options);
this.facingDir = 0;
this.H = window.innerHeight; //*0.75,
this.W = window.innerWidth; //*0.75;
this.xc = this.W/2; //zeby bylo w centrum :v
this.yc = this.H/2; //jw.
this.x = this.xc;
this.y = this.yc;
this.dv = 0.2;
this.dt = 1;
this.vx = 0;
this.vy = 0;
this.maxVel = 10;
}
Utils.inherits(Ship, MovingObject);
//Relocate ship if hit by asteroid.
Ship.prototype.relocate = function () {
this.pos = this.game.randomPosition();
this.vel = [0,0];
};
Ship.prototype.fireBullet = function () {
let bulletVel = [(this.vel[0] * 4), (this.vel[1] * 5) - 10];
let bullet = new Bullet({pos: this.pos, vel: bulletVel, game: this.game});
this.game.bullets.push(bullet);
};
//Calculate velocity based on keyboard input and angle of rotation
Ship.prototype.power = function (impulse) {
if (impulse[0] === -2 && this.facingDir !== Math.PI) {
this.facingDir <= Math.PI ? this.facingDir += 30 / 180 * Math.PI : this.facingDir -= 30 / 180 * Math.PI;
}
if (impulse[0] === 2 && this.facingDir !== 0) {
this.facingDir <= 0 ? this.facingDir += 30 / 180 * Math.PI : this.facingDir -= 30 / 180 * Math.PI;
}
if (impulse[1] === 2 && this.facingDir !== (Math.PI / 2 * 3)) {
this.facingDir <= (3 * Math.PI / 2) ? this.facingDir += 30 / 180 * Math.PI : this.facingDir -= 30 / 180 * Math.PI;
}
if (impulse[1] === -2 && this.facingDir !== (Math.PI / 2)) {
this.facingDir <= (Math.PI / 2) ? this.facingDir += 30 / 180 * Math.PI : this.facingDir -= 30 / 180 * Math.PI;
}
this.vel[0] += impulse[0];
this.vel[1] += impulse[1];
};
Ship.prototype.move = function () {
if (this.isWrappable) {
this.pos = this.game.wrap(this.pos);
}
this.pos[0] += this.vel[0];
this.pos[1] += this.vel[1];
//Attenuate the velocity over time so it doesn't accelerate forever.
this.vel[0] *= .98;
this.vel[1] *= .98;
};
Ship.prototype.convertToRadians = function(degree) {
return degree*(Math.PI/180);
}
Ship.prototype.draw = function (ctx) {
const img = new Image();
img.onload = function () {
ctx.drawImage(img, this.pos[0]-this.radius, this.pos[1]-this.radius)
};
img.src = 'galaga_ship.png';
ctx.drawImage(img, this.pos[0]-this.radius, this.pos[1]-this.radius);
**//This is where I am stuck.**
ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.facingDir);
ctx.translate(-7,-10);
ctx.restore();
};
module.exports = Ship;
在还原上下文之前没有绘制任何内容。ctx.save()
和ctx.restore()
的使用方式应该是,你保存它,用原始的旋转和原点的位置,你变换它,做绘图,然后恢复到它原来的位置。因此,只有绘图使用转换后的坐标系,然后其他一切都恢复正常。
**//This is where I am stuck.**
ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.facingDir);
ctx.translate(-7,-10);
// PUT DRAWING YOUR SHIP HERE
ctx.restore();
相关文章:
- 将函数的上下文应用于javascript变量
- 知道为什么我的旋转木马不会自动更改图片吗
- Twitter Bootstrap typeahead:使用“this”获取上下文/调用元素
- 使用JQuery的动态上下文菜单
- 如何访问UIWebView'的子窗口上下文
- 顺时针旋转Svg元件
- 将鼠标旋转限制为特定的度数
- 旋转后拖动对象
- 禁用旋转木马中的下一个按钮和上一个按钮
- 手动创建旋转活动指示器
- JQuery在单击正文时隐藏上下文菜单
- JQuery上下文菜单显示/隐藏问题
- 如何在容器中定位旋转的图像
- 在轴上旋转SVG图像
- 如何从HTTP上下文对象中获取Post数据
- 绕z轴旋转时出现iOS陀螺仪错误
- HTML字符串作为上下文
- 旋转按钮[HTML][JS]
- 按绝对值旋转画布绘图上下文的任何方法
- 画布如何旋转图像和重新绘制而不旋转整个上下文