Question

当更改窗口大小时，不会用渐变填充画布...

window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {

            canvas.width = window.innerWidth;
              canvas.height = window.innerHeight;
            draw();

    }
    resizeCanvas();

http://codepen.io/tworog/pen/jVoYrz

请帮忙。

Answer 1

您不需要使用javascript来完成此操作，您只需使用css即可。（我在下面的例子中将画布设为蓝色以证明它填满了整个页面）

＆＃13;

canvas {
  background: cornflowerblue;
}

html, body, canvas {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

＆＃13;

<canvas></canvas>

＆＃13;

Answer 2

画布大小已经更新。

为了摆脱渐变，您需要更改第48行，以便矩形的大小与画布匹配。

private final IntegerProperty plast = new SimpleIntegerProperty(); 

public void setPlast(int plast) {
    this.plast.set(plast);
}

public int getPlast() {
    return plast.get();
}

// this method will be used by the PropertyValueFactory
// and returns a Property which notifies TableView of changes
public IntegerProperty plastProperty() {
    return plast;
}

调整浏览器窗口大小动态填充画布

2 个答案: