gpt4 book ai didi

javascript - Canvas 上未绘制线条

转载 作者:行者123 更新时间:2023-12-03 01:37:33 26 4
gpt4 key购买 nike

<!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 Math 函数或未在之前的 moveTo 或 lineTo 函数中使用时才会绘制线条。我不明白发生了什么事。有人可以帮我吗?

最佳答案

不是Math.pi,它是Math.PI

使用 Math.pi 会导致 NaN,因此不会绘制线条。

直接改成

a: 90/180 * Math.PI//转换为弧度

关于javascript - Canvas 上未绘制线条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51001527/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com