Q&A
p5.jsのキャンバスをhtmlのmainタグの幅に合わせる方法を教えて下さい。
以下のように、createCanvasにwindowWidth,windowHeightを書いたのですがmainタグの幅に当てはまりません…
どうすれば、canvasの幅をmainに合わせることができるのでしょうか？
html
1コード 2<!DOCTYPE html> 3<html lang="ja"> 4 5<head> 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 9 <title>がとらいふ紹介ページ</title> 10 11 <link rel="stylesheet" href="css/normalize.css"> 12 <link rel="stylesheet" href="css/style.css"> 13 <script src='lib/p5.min.js'></script> 14</head> 15 16<body> 17 <header> 18 <div class="header-logo"> 19 <h1>GatoLife</h1> 20 </div> 21 <div class="header-list"> 22 <nav> 23 <ul class="clearfix"> 24 <li><a href="index.html" class="btn-flat-vertical-border">Introduce</a></li> 25 <li><a href="https://note.com/gatolife" target="_blank" class="btn-flat-vertical-border">Note</a></li> 26 <li class="current"><a href="PArts.html" class="btn-flat-vertical-border">PArts</a></li> 27 </ul> 28 </nav> 29 </div> 30 </header> 31 <main> 32 <h1>Welcome</h1> 33 <ul class="programs"> 34 <li><a href="https://editor.p5js.org/gatolifechannel/full/TlfbP-Ewj" target="_blank">https://editor.p5js.org/gatolifechannel/full/TlfbP-Ewj</a></li> 35 <li><a href="https://editor.p5js.org/gatolifechannel/full/jyYIQ2_f4" target="_blank">https://editor.p5js.org/gatolifechannel/full/jyYIQ2_f4</a></li> 36 37 </ul> 38 <script src='js/sketch.js'></script> 39<!-- <script src='js/test.js'></script>--> 40 </main> 41</body> 42
p5js
1コード 2var x=0; 3var y=0; 4var sp=3; 5 6function setup(){ 7 createCanvas(windowWidth, windowHeight); 8 9} 10 11function draw(){ 12 background(0); 13 translate(width/2,25); 14 circle(x,y,50); 15 Sfunction(); 16} 17 18function Sfunction(){ 19 x+=sp; 20 y=1/100*x*x; 21 if(y>height-50){ 22 sp*=-1; 23 var Px=x; 24 y=1/100*x*x; 25 } 26 fill(0,255,0); 27 textAlign(CENTER); 28 text("("+int(x)+","+int(y)+")",0,height/2); 29}
回答1件
0
これで調整できませんか？
js
1function setup(){ 2 createCanvas(windowWidth, windowHeight); 3 rectMode(CENTER); 4}
投稿2021/02/16 01:33
総合スコア233
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。