Question

所以这不是一个简单的标题帖，但我想要完成的是有一个正方形网格，随机改变颜色，可调节高度，宽度，间距和网格的时间值。

var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.canvas.width  = window.innerWidth;
        ctx.canvas.height = window.innerHeight;
        var width = window.innerWidth;
        var height = window.innerHeight;

        function toggleSettings(){
            var displayValue = document.getElementById("settingsMenu").style.display;
            if (displayValue == "block"){
                document.getElementById("settingsMenu").style.display = "none";
            } else {
                document.getElementById("settingsMenu").style.display = "block";
            }
        }

        var blockWidth =32;
        var blockHeight = 32;
        var blockSpacingX = 64;
        var blockSpacingY = 64;
        var refreshTime = 200;

        function updateVariables(){
            ctx.fillStyle="#000000";
            ctx.fillRect(0, 0, width, height);
            blockWidth = document.getElementById("blockWidth").value;
            blockHeight = document.getElementById("blockHeight").value;
            blockSpacingX = document.getElementById("blockSpacingX").value;
            blockSpacingY = document.getElementById("blockSpacingY").value;
            refreshTime = document.getElementById("refreshTime").value;
            refreshInterval();
        }

        var startInterval = setInterval(mainLoop, refreshTime);

        function refreshInterval() {
            clearInterval(startInterval);
            startInterval = setInterval(mainLoop, refreshTime);
        }

        function mainLoop(){
            for (y=0; y< height; y=y+blockSpacingY) {
                for (x=0; x < width; x=x+blockSpacingX) {
                ctx.fillStyle='#'+Math.floor(Math.random()*16777215).toString(16);
                ctx.fillRect(x, y, blockWidth, blockHeight);
                }
            }
        }

除了将这两行添加到updateVariables（）中之外，一切正常：

blockSpacingX = document.getElementById("blockSpacingX").value;
blockSpacingY = document.getElementById("blockSpacingY").value;

手动更改变量然后重新加载页面工作正常但由于某种原因它会中断所有输入并且只在画布的左上角放置4个方块。

小提琴：http://jsfiddle.net/L8909prp/

Answer 1

适合初学者的常见陷阱。使用

时，您输入的类型错误

<?xml version="1.0" encoding="UTF-8"?>
<prop:properties xmlns:prop="http://marklogic.com/xdmp/property">
  <publicationDate type="string" xmlns="http://marklogic.com/xdmp/json/basic">2015-03-30</publicationDate>
  <identifier type="string" xmlns="http://marklogic.com/xdmp/json/basic">2629</identifier>
  <posix type="string" xmlns="http://marklogic.com/xdmp/json/basic">nobs</posix>
</prop:properties>

这会返回一个字符串而不是一个数字，在for循环中，add将concatonates字符串连接起来，而不是添加值。

你有......

blockWidth = document.getElementById("blockWidth").value;

将导致

for (y = 0; y < height; y = y + blockSpacingY) {

要解决此问题，请确保从输入中获得的值为Number

blockSpacingY = "33"
y = 0;
y = y + blockSpacingY;
// now y === "033" 
// next itteration y === "03333"

应该是。

blockSpacingY = document.getElementById("blockSpacingY").value;

为所有输入执行此操作，这将解决您的问题。

当我在这里时，我会向您展示一些改进代码的简单方法。

blockSpacingY = parseInt(document.getElementById("blockSpacingY").value,10);
// or I prefer
blockSpacingY = Number(document.getElementById("blockSpacingY").value);

希望这有帮助，我没有错过任何东西。

更改值时脚本中断

1 个答案: