Question

我已经尝试过几个小时的自定义height，但我似乎无法让它正常工作。是否可以添加自定义height而不是window.innerHeight？因为我不希望它的height符合屏幕的高度。

以下是您检查的代码：

function initHeader() {
    width = window.innerWidth;
    height = window.innerHeight;
    target = {x: 0, y: height};

    largeHeader = document.getElementById('large-header');
    largeHeader.style.height = height+'px';

    canvas = document.getElementById('demo-canvas');
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext('2d');

    // create particles
    circles = [];
    for(var x = 0; x < width*0.5; x++) {
        var c = new Circle();
        circles.push(c);
    }
    animate();
}

以下是jsfiddle：jsfiddle

提前致谢：）

Answer 1

将其更改为

height = 100;

在你的小提琴上工作得很好。

所以只需输入你想要的任何数字。

编辑：

要使它们从顶部掉落，请更改Circle对象。在draw

_this.pos.y -= _this.velocity;

到

_this.pos.y += _this.velocity;

将反转气泡的方向，然后在init

_this.pos.y = 0;

将起始位置设置为画布顶部。

Answer 2

我认为没有任何理由不这样做。目前我可以看到两种方式：

<强> 1

你刚刚从函数中添加了两个额外的变量（最好的选择是首先声明那些然后是函数）：

var myOwnHight = window.innerHeight; //The value can be overwritten
var myOwnWidth = window.innerWidth;  //The value can be overwritten

它本身需要一个小修改的功能：

function initHeader()
{
  width = myOwnWidth;
  height = myOwnHight;

  ....
}

<强> 2

另一种方法是通过复制和传递值来“覆盖”initHeader()：

  //The original
  function initHeader() {
    width = window.innerWidth;
    height = window.innerHeight
   ...
  } 

//The new
function initHeader(myOwnHight, myOwnWidth)
{
  width = myOwnWidth;
  height = myOwnHight;

 ....
}

结果是，出现两个具有相同名称的不同功能。（现代）浏览器知道它们之间的区别并调用正确的函数

但是你决定，你必须在函数initHeader()中做一个小修改。

如何删除innerHeight并添加客户像素/百分比高度？

2 个答案: