【发布时间】：2019-08-07 11:57:02
【问题描述】：
var car;
var front;
var back;
var carpoint1;
var carpoint2;
var carpoint3;
var carpoint4;
var img = new Image();
img.src = 'https://cdn4.iconfinder.com/data/icons/transportation-2-4/60/transportation-2-flat-036-racing-car-top-512.png';
function startGame() {
car = new move(12, 20, "red", 600, 300);
pg.start();
}
var pg = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 1200;
this.canvas.height = 600;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateframe, 20);
window.addEventListener('keydown', function (e) {
e.preventDefault();
pg.keys = (pg.keys || []);
pg.keys[e.keyCode] = (e.type == "keydown");
})
window.addEventListener('keyup', function (e) {
pg.keys[e.keyCode] = (e.type == "keydown");
})
},
stop : function() {
clearInterval(this.interval);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function move(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.speed = 0;
this.angle = 0;
this.moveAngle = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = pg.context;
ctx.save();
getcarpoints(this.x, this.y, this.angle);
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.drawImage(img, this.width / -2, this.height / -2,20,40);
ctx.restore();
ctx.beginPath();
ctx.moveTo(300, 150);
ctx.lineTo(600, 800);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(300, 150);
ctx.lineTo(carpoint1[0], carpoint1[1]);
ctx.stroke();
}
this.newPos = function() {
this.angle += this.moveAngle * Math.PI / 180;
this.x += this.speed * Math.sin(this.angle);
this.y -= this.speed * Math.cos(this.angle);
}
}
function getcarpoints(prex,prey,rotation)
{
carpoint1=[getrotatedx(prex,prey,rotation), getrotatedy(prex,prey,rotation)];
carpoint2=[carpoint1[0], carpoint1[1]+40];
carpoint3=[carpoint2[0]+20, carpoint2[1]+40];
carpoint4=[carpoint3[0]+20, carpoint3[1]];
// console.log(carpoint1[0]);
}
function getrotatedx(prex,prey,rotation)
{
piangle=Math.abs((rotation/ Math.PI * 180)%360);
newx=Math.cos(piangle)*prex+(-(Math.sin(piangle)*prey));
return newx;
}
function getrotatedy(prex,prey,rotation)
{
piangle=Math.abs((rotation/ Math.PI * 180)%360);
newy=Math.sin(piangle)*prex+(Math.cos(piangle)*prey);
return newy;
}
function updateframe() {
pg.clear();
car.moveAngle = 0;
car.speed = 0;
if (pg.keys && pg.keys[37]) { if (pg.keys && pg.keys[40]) {car.moveAngle= 5; } if (pg.keys && pg.keys[38]){car.moveAngle = -5; } }
if (pg.keys && pg.keys[39]) { if (pg.keys && pg.keys[40]) {car.moveAngle= -5; } if (pg.keys && pg.keys[38]){car.moveAngle = 5; } }
if (pg.keys && pg.keys[38]) {car.speed= 5; }
if (pg.keys && pg.keys[40]) {car.speed= -5; }
car.newPos();
car.update();
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script src="control.js"></script>
</body>
</html>这是我在 sn-p 中的完整代码。我正在尝试从一个固定点到汽车制作一条线……这就是问题所在。
现在在任何 x 点处于水平状态时，它都可以正常工作，但是当汽车转弯的那一刻，角度发生了变化，一切都变得一团糟！您可以看到，当您转动汽车时（同时使用箭头和左箭头或右箭头），线会跳动。
注意：我的项目要求使用 2d 旋转矩阵来完成，这意味着我无法在恢复画布之前制作线条。
carpoint1,2,3,4 是汽车的角落，但现在我只是在使用 carpoint1。
做一些事情，让 getrotatedx 和 getrotatedy 总是给出正确的值，即矩阵旋转后的汽车坐标。
【问题讨论】：
标签： javascript html canvas rotation matrix-multiplication