Q&A
p5.jsはよく知らないので深入りできませんが、Processingではscaleっていう縮小/拡大のスケーリング関数があるので、表示サイズとともにscaleを変更してやれば「描画バッファサイズを変えないで表示サイズを変える」ことができそうな気がしますがいかがでしょう。
前提・実現したいこと
中身をp5.jsで書いたcanvasをローカルブラウザで表示しています。
このcanvasの（描画バッファサイズではなく）表示サイズを大きくしたいのですが、CSSから#canvasやp5.js内で設定したID.mycanvasをセレクトしてもアクセスできていないようです。
何がダメなんでしょうか？
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no> 6 <link rel="stylesheet" href="style.css"> 7 <script src="../p5.min.js"></script> 8 <script src="../addons/p5.dom.min.js"></script> 9 <script src="sketch.js"></script> 10 </head> 11 <body> 12 </body> 13</html>
JavaScript
1function setup() { 2 let cnv = createCanvas( 256, 224 ); 3 cnv.id('mycanvas'); //canvasのリファレンスは設定できました 4} 5 6function draw() { 7 background(0); //実際は600行くらいあります 8}
CSS
1@charset "UTF-8"; 2 3body {/*効いてる*/ 4 padding: 0; margin: 0; 5 width: 70vw; 6 height: 70vh; 7} 8#canvas {/*効いてない*/ 9 height: 70vh; 10} 11.mycanvas {/*効いてない*/ 12 height: 70vh; 13}
補足
描画バッファサイズもろともJSから変えることはしたくありません。というのも、解像度を下げることで処理を軽くすることを意図しているからです...が、この点についてもツッコミがございましたらお聞かせください。
回答ありがとうございます。
scale()はp5.jsにもありますが、（単に後に続くpx数値に定数を掛け算するだけで）描画サイズの部分を変えてしまうものだと理解しています。じっさい、draw()の先頭にscale(windowHeight/224);を置いて拡大すると、解像度はバリバリに高まり、小数点の問題と思われる1pxの隙間が発生したりします。あくまで出力はそのままのpx数で行い、表示する側でそれを引き伸ばすことを目指しています。
回答1件
0
ベストアンサー
p5.jsはさっぱりわかりませんが、createCanvasしたときに直接styleをつけてるんじゃないでしょうかね。
自分で上書きすれば当たりました。
js
1function setup() { 2 let cnv = createCanvas(200, 200); 3 //cnv.id('mycanvas'); 4 cnv.style('height', '70vh'); 5} 6 7function draw() { 8 background(0); 9 rect(50, 50, 100, 100); 10}
どうしてもcssで当てたければ、importantをつければ当たりました。
CSS
1#defaultCanvas0 { height: 70vh !important; } 2/* #mycanvas { height: 70vh !important; } */
投稿2021/07/06 09:17
編集2023/07/27 16:27
総合スコア9315
できました！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！（毎度）ありがとうございます！！！
!important、今後は試してから質問します。。。。。。。。。。。。。。。。。。
あなたの回答
tips
プレビュー
