だからアイデアは - キャンバスの位置スタイルをjsで修正したいので、スクロールバーが表示されません。 事がある - これは私が代わりに得るものですjsで作成されたキャンバスにCSSの位置を固定
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);
...私はクロームインスペクタで簡単にスタイルを変更することができ、すべてが正常に動作しますが、jsは企業に拒否する: HTML、ボディとメインラップは100%です。ちょうど私が望む方法ですが、キャンバス自体は伸びていますが、固定されていません... 私は間違っていることを本当に知りません...アイデア?手動クロムインスペクタ編集が仕事をしていません
... コード全体
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);
}
}
を投稿してくださいコード全体 – Ionut
なぜ100%の幅と高さではなく固定されている必要がありますか? –
私は体よりも大きなキャンバスが必要です(私はマウスの視差効果をしています) –