在画布上绘制带变量的rect（） - 仅适用于数字？

那么，看看这个代码，主要是函数中的drawPaddle函数和var paddleY。在画布上绘制带变量的rect（） - 仅适用于数字？

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>GAME</title> 
 
\t <meta charset="utf-8"/> 
 
\t <style type="text/css"> 
 
\t \t canvas { 
 
\t \t \t background-color: gray; 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <canvas width="500" height="500" id="myCanvas"></canvas> 
 
\t 
 
\t <script type="text/javascript"> 
 
\t \t var canvas = document.getElementById('myCanvas'); \t 
 
\t \t var ctx = canvas.getContext('2d'); 
 

 
\t \t var ballX = canvas.width/2; 
 
\t \t var ballY = canvas.height - 80; 
 
\t \t var ballR = 10; 
 
\t \t var ballMX = 2; 
 
\t \t var ballMY = -2; 
 
\t \t var paddleX = (canvas.width/2) - (130/2); 
 
\t \t var paddleY = canvas.height - paddleH; 
 
\t \t var paddleW = 130; 
 
\t \t var paddleH = 15; 
 

 
\t \t function drawPaddle() { 
 
\t \t \t ctx.beginPath(); 
 
\t \t \t ctx.fillStyle = "green"; 
 
\t \t \t ctx.rect(paddleX, paddleY, paddleW, paddleH); 
 
\t \t \t ctx.fill(); 
 
\t \t \t ctx.closePath(); 
 
\t \t } 
 

 
\t \t drawPaddle(); 
 
\t </script> 
 
</body> 
 
</html>

在var paddleY我得到canvas.height - paddleH，这个代码不画桨，但是当我在var paddleYcanvas.height - 15改变，它正在它为什么呢？

来源

2017-06-15 Mariuho

考虑你的这部分代码：

var paddleY = canvas.height - paddleH; 
var paddleW = 130; 
var paddleH = 15;

你只是后来定义paddleH。这意味着，在这段代码的第一行，paddleH解析为undefined，所以结果不是一个数字，矩形无法绘制。您需要初始化paddleH BEFORE计算paddleY：

var paddleH = 15; 
var paddleY = canvas.height - paddleH;

现在脚本知道paddleH为15，可以绘制矩形。

来源

2017-06-15 18:43:23 Aenadon

在画布上绘制带变量的rect（） - 仅适用于数字？

回答

相关问题