Javascript 我的html5画布背景和挡板不会显示在浏览器中
我在浏览器中加载javascript代码时遇到问题，问题是： 我试着用一个白色的球和一个黑色的正方形（作为背景）来装一个白色的桨 当我尝试在chrome中加载它时，什么都没有出现，我不知道为什么代码如下：Javascript 我的html5画布背景和挡板不会显示在浏览器中,javascript,html5-canvas,Javascript,Html5 Canvas,我在浏览器中加载javascript代码时遇到问题，问题是： 我试着用一个白色的球和一个黑色的正方形（作为背景）来装一个白色的桨 当我尝试在chrome中加载它时，什么都没有出现，我不知道为什么代码如下： <html> <head> <title>paddle</title> </head> <body> <canvas id="myCanvas" width="800" h
<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, 0, canvas.width, canvas.height)
canvasContext.fillStyle = "white";
canvasContext.beginPath()
canvasContext.arc(ballX, ballY, 10, 0, Math.PI*2, true);
canvasContext.fill()
}
</script>
</body>
</html>
桨
恒定桨叶宽度=100
常量叶片厚度=10
变量x=400
var画布
var canvasContext
var ballX=5
var ballSpeedX=5
var ballY=5
var=5
函数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
PapperX=鼠标
}
window.onload=函数（）{
var fps=30；
设置间隔（更新，1000/fps）
canvas=document.getElementById（“myCanvas”）；
canvasContext=canvas.getContext（“2d”）
canvas.addEventListener（“mousemove”，updateMousePos）
}
函数updateAll（）{
C
巴利+=巴利
ballX+=ballSpeedX
如果（球>画布宽度）{
ballSpeedX*=-1
}
if（ballX<0）{
ballSpeedX*=-1
}
如果（球>画布高度）{
球速*=-1
}
if（ballY<0）{
球速*=-1
}
canvasContext.fillStyle=“黑色”
canvasContext.fillRect（0,0，canvas.width，canvas.height）
canvasContext.fillStyle=“白色”；
canvasContext.beginPath（）
canvasContext.arc（ballX，ballY，10，0，Math.PI*2，true）；
canvasContext.fill（）
}
updateAllupdateAll