【发布时间】：2016-05-20 03:25:12
【问题描述】：
我正在尝试在 Canvas 中制作乒乓球游戏。我想我会先让球穿过街道。问题是当我循环绘制函数时，它变成一条线，而不是每个新位置的球。 （见下面的截图。）
我认为清除画布然后重新绘制所有内容可以解决问题，但显然不是。
这是我的代码：
HTML：
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<title>Super Pong!</title>
<script type="text/javascript" src="superPong.js"></script>
</head>
<body>
<nav>
<ul id="navlist">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 4</a></li>
</ul>
</nav>
<div id="content">
<canvas width="1000" height="600">Your browser does not support HTML5 Canvas</canvas>
</div>
</body>
</html>
CSS：
body {
background-color: #E93D19;
color: #341711;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 2vw;
}
#content {
text-align: center;
padding-top: 3%;
}
canvas {
background-color: white;
}
nav {
height: 100px;
width: 100%;
text-align: center;
font-size: 3vw;
}
#navlist {
background-color: #FD851D;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
transform: translateY(10%);
}
#navlist li {
display: inline;
}
#navlist a {
color: #C91D09;
text-decoration: none;
}
#navlist a:hover {
background-color: #C91D09;
color: #FD851D;
}
JavaScript：
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded(){
var canvas=document.querySelector("canvas");
var ctx=canvas.getContext("2d");
var canWidth=canvas.width;
var canHeight=canvas.height;
var pi=Math.PI;
var timer=null;
var ms=16;
var gameBall={
size:30,
positionX:0,
positionY:0,
color:"#FFF",
set setSize(newSize){
this.size=newSize;
},
set setPosX(posX){
this.positionX=posX;
},
set setPosY(posY){
this.positionY=posY;
},
set setColor(newColor){
this.color=newColor;
},
get getSize(){
return this.size;
},
get getPosX(){
return this.positionX;
},
get getPosY(){
return this.positionY;
},
get getColor(){
return this.color;
}
}
function clearCanvas(){
ctx.clearRect(0,0,canWidth,canHeight);
}
function drawBackground(){
ctx.fillStyle="#000";
ctx.fillRect(0,0,canWidth,canHeight);
}
function drawBall(){
ctx.save();
var posX=gameBall.getPosX;
var posY=gameBall.getPosY;
var size=gameBall.getSize;
ctx.fillStyle=gameBall.getColor;
ctx.arc(posX,posY,size,0,2*pi,true);
ctx.fill();
ctx.restore();
}
function updateBall(){
//clearCanvas();
//drawBackground();
gameBall.setPosX=gameBall.getPosX+3;
gameBall.setPosY=gameBall.getPosY+3;
drawBall();
}
gameBall.setPosX=100;
gameBall.setPosY=100;
drawBackground();
timer=setInterval(updateBall, ms);
}
【问题讨论】：
-
我会建议在每次更新时清除画布，然后再绘制新位置等。我看到你的
updateBall函数中有这个，但它似乎被注释掉了。我说它没用对吗？ -
目前被注释掉的原因是我尝试了几种不同的解决方案（例如“ctx.save() 和 ctx.restore()”）。遗憾的是两者都不起作用。
-
我创建了一个小提琴（代码略有更新，但问题仍然存在）jsfiddle.net/Q5HDu/288
-
@Phrosen。在处理了 2 个问题后，我添加了一个答案，显示了您的 Fiddle 的工作版本。祝你的项目好运！
标签： javascript css html canvas