使用js將css位置更改為固定在創建的畫布上

Question

所以這個想法是-我想通過js固定畫布的位置樣式，所以我沒有滾動條。 關鍵是-我可以使用chrome inspector輕松更改樣式，並且一切正常，但是js拒絕合作...

function setup() {
      //full screen setup
      canvas = createCanvas(window.innerWidth*2,window.innerHeight*2);
      canStyle = canvas.style;
      canvas.style.position = "fixed";
      mainWrap = document.getElementById('mainWrap');
      canvas.parent(mainWrap);

這是我得到的： html，body和main wrap都是100％，只是我想要的樣子，但是畫布本身是拉伸的，但不是固定的……我真的不知道我做錯了什么嗎？

手動的chrome檢查器編輯可以完成工作...整個代碼

HTML：

<html>
<head>
  <meta charset="utf-8">
  <title>Sky</title>
  <link href="style.css" rel="stylesheet" type="text/css"/>
  <script language="javascript" type="text/javascript" src="libs/p5.js"></script>
  <script language="javascript" src="libs/p5.dom.js"></script>
  <script language="javascript" type="text/javascript" src="sketch.js"></script>
  <script language="javascript" type="text/javascript" src="star.js"></script>
  <style> body {padding: 0; margin: 0;} </style>
</head>
<body>
  <div id="mainWrap">
  </div>
</body>
</html>

CSS：

html, body, #mainWrap {
  height:100%;
  width:100%;
  margin:0px;
}
body{
  background-color: #222222;
}

JS：

var mainWrap;
var sky = [];
var x;
var y;
var trans = false;
function setup() {
  //full screen setup
  canvas = createCanvas(window.innerWidth*2,window.innerHeight*2);
  canStyle = canvas.style;
  canvas.style.position = "fixed";
  mainWrap = document.getElementById('mainWrap');
  canvas.parent(mainWrap);

  for(var i = 0; i < 1; i++){
        var star = new Star(i, random(width),random(height), Math.floor(random(1,4)));
        sky[i] = star;
        console.log(sky[i]);
  }
}
function draw() {
  background(34,34,34);
  x = mouseX;
  y = mouseY;
  if(trans === false){
    translate(x-(width/2),y-(height/2));
  }
  for (var i=0; i < sky.length; i++){
      sky[i].show();
      sky[0].fall(0.4,0.3);
  }
}

星標obj：

function Star(id,xCord, yCord, parallax) {
  this.parrlax = parallax;
  this.id = id;
  this.x = xCord;
  this.y = yCord;
  this.r = parallax;
  noStroke();

  this.show = function(){
    fill(255,255,255, random(30*this.parrlax,this.parrlax*40));
    ellipse(this.x, this.y, this.r*2, this.r*2);
  }
this.fall = function(xMove, yMove) {
  this.x += xMove;
  this.y += yMove;
  fill(100,100,100);
  ellipse(this.x,this.y,3,3);
  }

}

Answer 1

假設createCanvas是P5.js形式的方法，則需要訪問所創建畫布的底層DOM元素：

canvas = createCanvas(window.innerWidth*2,window.innerHeight*2);
// canvas here refers to an instance of P5 canvas, not a HTML5 canvas element, 
// but the real DOM canvas is available as either .canvas or .elt
canvas.elt.style.position = "fixed";

使用js將css位置更改為固定在創建的畫布上

問題描述

1 個解決方案

解決方案1
1 已采納 2016-12-19 15:27:10

使用js將css位置更改為固定在創建的畫布上

問題描述

1 個解決方案

解決方案1 1 已采納 2016-12-19 15:27:10

解決方案1
1 已采納 2016-12-19 15:27:10