我正在制作一个用圆圈绘制的程序,每次运行它都会给我相同的语法错误。看起来应该很好,但事实并非如此。下面是代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Circle draw</title>
<style type="text/css">
canvas{
border: 1px solid black;
}
body{
margin: 0;
}
</style>
</head>
<body>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<canvas>
</canvas>
<script type="text/javascript">
window.onload = function(){
window.onclick = function(e){
var evt = window.event||e;
document.getElementById("result1").innerHTML = "you made a circle at coordinates: "
document.getElementById("result2").innerHTML = evt.clientX;
document.getElementById("result3").innerHTML = evt.clientY}
var canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext("2d");
var radius = 50;
var dx = 5;
var dy = 5;
c.beginPath();
c.stroke();
function animate() {
requestAnimationFrame(animate)
var x = document.getElementById(resulet2);
var y = document.getElementById(resulet3);
c.beginPath();
c.arc(x,y,radius,0,Math.PI * 2,false);
c.stroke();
x += dx
y += dy
if( x + radius > canvas.width || x - radius < 0){ dx = -dx}
if( y + radius > canvas.height || y - radius < 0){ dy = -dy}
}
animate();
</script>
</body>
</html>
这是代码,但我说了所有可能的,我需要更多的细节,所以我只会讨论代码运行时应该发生什么。它应该在你点击或点击的地方生成一个圆圈,然后在不清除其他圆圈的情况下移动它,并在墙上反弹。
你有三个函数,你只结束了两个。只要在}
端再添加一个函数,就可以了。