我觉得这里缺少了一些明显的东西，但我找不到它是什么：
我有两个绘图功能：第一个draw_canvas((绘制背景，在大部分画布大小上绘制两个矩形。第二个draw_player((绘制了一个带有上下文的三角形。stroke((
它们都是在一个用setInterval(update，10(调用的更新函数中调用的，context.clearRect也在那里。
三角形的方向也会通过document.onkeydown和onkeyup更新。
根据我的理解，clearRect((应该刷新画布并擦除所有内容，draw_canvas应该重新绘制背景，这两个都应该擦除我的三角形。
然而，当改变方向时，可以看到三角形的每一次迭代，我不明白为什么它没有被删除。
有人能向我解释一下发生了什么事吗？
我的代码在下面(104行(
var canvas;
var ctx;
var lx;
var ly;
right = false;
left = false;
var player = {
x: 0,
y: 0,
size: 32,
angle: 90
}
window.addEventListener("load", function(event) {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
player.x = canvas.width/2;
player.y = canvas.height/2;
});
document.onkeydown = function (e) {
/*
left = 37
up = 38
right = 39
down = 40
space = 32
*/
if(e.keyCode == 37){
left = true;
right = false;
}
if(e.keyCode == 39){
left = false;
right = true;
}
}
document.onkeyup = function (e) {
if(e.keyCode == 37 || e.keyCode == 39){
left = false;
right = false;
}
}
function draw_canvas(){
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.fillRect(1, 1, canvas.width-2, canvas.height-2);
}
function draw_player(){
// draw du player, triangle équilatéral avec angle
ctx.strokeStyle = 'black';
ctx.linewidth = 2;
lx = player.x + (player.size/2)*Math.cos(Math.PI*player.angle/180);
ly = player.y + (player.size/2)*Math.sin(-Math.PI*player.angle/180);
ctx.moveTo(lx,ly);
ctx.lineTo( lx + player.size*Math.cos(Math.PI*(player.angle-150)/180),
ly + player.size*Math.sin(-Math.PI*(player.angle-150)/180));
ctx.stroke();
lx = lx + player.size*Math.cos(Math.PI*(player.angle-150)/180),
ly = ly + player.size*Math.sin(-Math.PI*(player.angle-150)/180);
ctx.moveTo(lx,ly);
ctx.lineTo( lx + player.size*Math.cos(Math.PI*(90 + player.angle)/180),
ly + player.size*Math.sin(-Math.PI*(90 + player.angle)/180));
ctx.stroke();
lx = lx + player.size*Math.cos(Math.PI*(90 + player.angle)/180);
ly = ly + player.size*Math.sin(-Math.PI*(90 + player.angle)/180);
ctx.moveTo(lx,ly);
ctx.lineTo( lx + player.size*Math.cos(Math.PI*(player.angle-30)/180),
ly + player.size*Math.sin(-Math.PI*(player.angle-30)/180));
ctx.stroke();
}
function update_player(){
if (right){
player.angle -= 2;
}
else if (left){
player.angle += 2;
}
}
setInterval(update,10);
function update(){
ctx.clearRect(0,0,canvas.width,canvas.height);
draw_canvas();
draw_player();
update_player();
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Asteroids</title>
<script type="text/javascript" src="asteroids.js"></script>
</head>
<body>
<canvas id="canvas" width="512" height="512"></canvas>
</body>
</html>只需将ctx.beginPath()作为draw_player()中的第一件事添加即可。
顺便说一句。尝试使用requestAnimationFrame(update);而不是10ms的间隔。