使用js将css位置更改为固定在创建的画布上

Question

So the idea is - I want to get the canvas position style to be fixed through js, so I don't get the scroll bars. 所以这个想法是-我想通过js固定画布的位置样式，所以我没有滚动条。 The thing is - I can change the style easily with chrome inspector and all works fine, but js refuses to corporate... 关键是-我可以使用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);

This is what I get instead : 这是我得到的： The html, body and main wrap are 100% , just the way I want it, but the canvas itself is stretched, but not fixed... I really don't know what I'm doing wrong... Ideas? html，body和main wrap都是100％，只是我想要的样子，但是画布本身是拉伸的，但不是固定的……我真的不知道我做错了什么吗？

The manual chrome inspector edit does the job... Whole Code 手动的chrome检查器编辑可以完成工作...整个代码

HTML: 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: CSS：

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

JS: 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);
  }
}

Star obj: 星标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

Assuming createCanvas is a method form P5.js , you need to access the underlying DOM element of the created canvas: 假设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