\r\n \r\n \r\n \r\n \r\n \r\n\r\n```\r\n```JavaScript\r\nfunction setup() {\r\n let cnv = createCanvas( 256, 224 );\r\n cnv.id('mycanvas');　//canvasのリファレンスは設定できました\r\n}\r\n\r\nfunction draw() {\r\n background(0); //実際は600行くらいあります\r\n}\r\n```\r\n```CSS\r\n@charset \"UTF-8\";\r\n\r\nbody {/*効いてる*/\r\n padding: 0; margin: 0;\r\n width: 70vw;\r\n height: 70vh;\r\n} \r\n#canvas {/*効いてない*/\r\n height: 70vh;\r\n}\r\n.mycanvas {/*効いてない*/\r\n height: 70vh;\r\n}\r\n```\r\n\r\n\r\n### 補足\r\n\r\n描画バッファサイズもろともJSから変えることはしたくありません。というのも、解像度を下げることで処理を軽くすることを意図しているからです...が、この点についてもツッコミがございましたらお聞かせください。","answerCount":1,"upvoteCount":2,"datePublished":"2021-07-05T16:42:59.733Z","dateModified":"2023-07-28T01:27:17.000Z","acceptedAnswer":{"@type":"Answer","text":"p5.jsはさっぱりわかりませんが、`createCanvas`したときに直接`style`をつけてるんじゃないでしょうかね。\n\n自分で上書きすれば当たりました。\n```js\nfunction setup() {\n let cnv = createCanvas(200, 200);\n //cnv.id('mycanvas');\n cnv.style('height', '70vh');\n}\n\nfunction draw() {\n background(0);\n rect(50, 50, 100, 100);\n}\n```\n\nどうしてもcssで当てたければ、`important`をつければ当たりました。\n```CSS\n#defaultCanvas0 { height: 70vh !important; } \n/* #mycanvas { height: 70vh !important; } */\n```","dateModified":"2023-07-27T16:27:17.519Z","datePublished":"2021-07-06T09:17:13.142Z","upvoteCount":1,"url":"https://teratail.com/questions/347883#reply-477158"},"suggestedAnswer":[],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"canvasに関する質問","url":"https://teratail.com/tags/canvas"},{"@type":"ListItem","position":3,"name":"canvas","url":"https://teratail.com/tags/canvas"}]}}}
teratail
回答率
85.29%
質問するログイン新規登録
トップcanvasに関する質問
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

Q&A

解決済

1回答

3222閲覧

【p5.js】canvasの表示サイズを変えたい

helpmeahhhhh
helpmeahhhhh

総合スコア4

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

2グッド

0クリップ

投稿2021/07/05 16:42

2

0

前提・実現したいこと

中身を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から変えることはしたくありません。というのも、解像度を下げることで処理を軽くすることを意図しているからです...が、この点についてもツッコミがございましたらお聞かせください。

TN8001, justmeet0924が👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

thkana
thkana

2021/07/05 22:54

p5.jsはよく知らないので深入りできませんが、Processingではscaleっていう縮小/拡大のスケーリング関数があるので、表示サイズとともにscaleを変更してやれば「描画バッファサイズを変えないで表示サイズを変える」ことができそうな気がしますがいかがでしょう。
helpmeahhhhh
helpmeahhhhh

2021/07/06 08:17 編集

回答ありがとうございます。 scale()はp5.jsにもありますが、（単に後に続くpx数値に定数を掛け算するだけで）描画サイズの部分を変えてしまうものだと理解しています。じっさい、draw()の先頭にscale(windowHeight/224);を置いて拡大すると、解像度はバリバリに高まり、小数点の問題と思われる1pxの隙間が発生したりします。あくまで出力はそのままのpx数で行い、表示する側でそれを引き伸ばすことを目指しています。
guest

回答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
TN8001
TN8001

総合スコア10211

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

helpmeahhhhh
helpmeahhhhh

2021/07/06 13:14

できました！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！（毎度）ありがとうございます！！！ !important、今後は試してから質問します。。。。。。。。。。。。。。。。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップcanvasに関する質問

【p5.js】canvasの表示サイズを変えたい