<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Asteroids</title>
<style media="screen">
</style>
</head>
<body>
<canvas id="gameCanvas" width="700" height="500"></canvas>
<script type="text/javascript">
const FPS = 30; // frames per second
const SHIP_SIZE = 30; // ship height in pixels
/* @type {HTMLCanvasElement} */
var canv = document.getElementById('gameCanvas');
var ctx = canv.getContext("2d");
var ship = {
x: canv.width / 2,
y: canv.height / 2,
r: SHIP_SIZE / 2,
a: 90 / 180 * Math.pi // Convert to radians
}
// set up the game loop
setInterval(update, 1000 / FPS);
function update() {
// draw space
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canv.width, canv.height);
// draw triangular ship
ctx.strokeStyle = "white";
ctx.lineWidth = SHIP_SIZE / 20;
ctx.beginPath();
ctx.moveTo( // nose of the ship
ship.x + 4 / 3 * ship.r * Math.cos(ship.a),
ship.y - 4 / 3 * ship.r * Math.sin(ship.a)
);
ctx.lineTo( // rear left
ship.x - ship.r * (2 / 3 * Math.cos(ship.a) + Math.sin(ship.a)),
ship.y + ship.r * (2 / 3 * Math.sin(ship.a) - Math.cos(ship.a))
);
ctx.lineTo( // rear right
ship.x - ship.r * (2 / 3 * Math.cos(ship.a) - Math.sin(ship.a)),
ship.y + ship.r * (2 / 3 * Math.sin(ship.a) + Math.cos(ship.a))
);
ctx.closePath();
ctx.stroke();
// rotate ship
// move the ship
// center dot
ctx.fillStyle = "red";
ctx.fillRect(ship.x - 1, ship.y - 1, 2, 2);
}
</script>
</body>
</html>
Я не знаю, почему линии не рисуются в этом коде.Всякий раз, когда я рисую линию после функции moveTo, она не рисуется, а указатель перемещается в указанное место.Когда я снова использую функцию lineTo для рисования линии, она рисуется, только если внутри нее не используется математическая функция javascript или она не используется в предыдущей функции moveTo или lineTo.Я не могу понять, что происходит.Может кто-нибудь, пожалуйста, помогите мне?