时间戳

首页 > 解决方案 > 无法在 JavaScript 中为元素设置原点

javascript - 无法在 JavaScript 中为元素设置原点

问题描述

我正在用 js 制作一个简单的游戏，它由一个网格和一些单元格组成在此处输入图像描述

这就是它目前的样子，而且效果很好。问题是，在进行此操作时，我将边距设置为 0，但我想将画布移动到中心。为此，我从这个函数中获得了利润

var test = document.querySelector('.test');
var left_margin = window.getComputedStyle(test).getPropertyValue("margin- 
    left "); // returns margin e.g. '655px'
    left_margin = left_margin.match(/\d+/);

然后我对整个事物进行了一些更改以解决此偏移量，但由于某种原因，当我尝试将偏移量添加到 x 轴时，它返回 NaN。为了确保没有问题，我对这个值执行了一些基本的数学运算并且它们起作用了。有人能告诉我这是怎么回事吗？而且，是否有一种简单的方法可以重新定义元素的原点（在我的情况下是画布），以避免这种麻烦？

编辑：我不明白这一点。当我简单地做 var a = blockWidth + 0;游戏没有开始然后做 console.log(a) 这也返回 NaN。我得到**（未捕获的TypeError：无法设置未定义的属性'strokeStyle'）**

function grid(){
    var a = blockWidth + left_margin;
    var b = blockHeight;
    while (a != widthWin){
        drawLine(a, 0, a, heightWin, 1, 'gray');
        a += blockWidth;
    }
    while (b != heightWin){
        drawLine(left_margin, b, widthWin+left_margin, b, 1, 'gray');
        b += blockHeight;
    }
}

标签： javascriptcss

解决方案

你得到什么

left_margin = left_margin.match(/\d+/);

是一个数组["655"]，而不是您假设的 int。

因此，在使用它进行任何数学运算之前，您需要访问它的第一个元素并将其解析为一个数字：

left_margin = parseInt(left_margin.match(/\d+/)[0]);

推荐阅读