我的html5画布背景和桨不会显示在浏览器中

问题描述

我在浏览器中加载javascript代码时遇到问题，这是问题所在：我正在尝试用白色球和一个大黑方块加载一个白色桨（用于背景）当我尝试将其加载到chrome中时，什么都没有出现，我不知道为什么这里是代码：

<html>
<head>

<title>paddle</title>
</head>
<body>
 <canvas id="myCanvas" width="800" height="600"></canvas>
<script>
 const paddle_width = 100
 const paddle_thickness = 10
 var paddleX = 400
 var canvas
    var canvasContext
  var ballX = 5
  var ballSpeedX = 5
  var ballY = 5
  var ballSpeedY = 5
function updateMousePos(evt) {
var rect = canvas.getBoundingClientRect()
var root = document.documentElement;
var mouseX = evt.clientX - rect.left - root.scrollLeft
//var mouseY = evt.clientY - rect.top = - root.scrollT
   paddleX = mouseX
}
  window.onload = function() {

  var fps = 30;
  setInterval(updateall,1000/fps)
  canvas = document.getElementById("myCanvas");
  canvasContext = canvas.getContext("2d")
canvas.addEventListener("mousemove",updateMousePos)
}
 function updateall() {
c
 ballY += ballSpeedY
 ballX += ballSpeedX
if(ballX > canvas.width) {
ballSpeedX *= -1
}
if(ballX < 0) {
ballSpeedX *= -1
}
if(ballY > canvas.height) {
ballSpeedY *= -1
}
 if(ballY < 0) {
  ballSpeedY *= -1
 }

canvasContext.fillStyle = "black"
canvasContext.fillRect(0,canvas.width,canvas.height)

canvasContext.fillStyle = "white";
canvasContext.beginPath()
 canvasContext.arc(ballX,ballY,10,Math.PI*2,true);
      canvasContext.fill()
     }


   </script>
  </body>
  </html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html5-canvas javascript