2016-12-19 8 views
0

だからアイデアは - キャンバスの位置スタイルを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は企業に拒否する: canvas is really not fixed HTML、ボディとメインラップは100%です。ちょうど私が望む方法ですが、キャンバス自体は伸びていますが、固定されていません... 私は間違っていることを本当に知りません...アイデア?手動クロムインスペクタ編集が仕事をしていません

enter image description here

... コード全体

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

} 
+0

を投稿してくださいコード全体 – Ionut

+0

なぜ100%の幅と高さではなく固定されている必要がありますか? –

+0

私は体よりも大きなキャンバスが必要です(私はマウスの視差効果をしています) –

答えて

1

createCanvasmethod form P5.jsであると仮定すると、あなたが作成したキャンバスのunderlying DOM elementにアクセスする必要があります。

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"; 
+0

まさに私は天才でした! –

関連する問題