質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

3回答

2309閲覧

canvasについて

Yoshinori

総合スコア35

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/07/25 09:29

下記のコードについて質問です
いくつかあるので箇条書きにします

・canvasサイズを1000×1500にしていますが、数値ではなくオートで画面いっぱいまでcanvasにする方法を教えてください。
・現在canvasの一番右にボールが行くとアニメーションをストップさせていますが
どうすれば左に帰ってくるようにできますか?
・canvasを画面いっぱいに表示した場合今までだと

JavaScript

1if (x > ○○){ 2 //処理 3}

としていましたが○○には何を入れたらいいのでしょうか?

JavaScript

1 2<!doctype html> 3<html> 4<head> 5 6</head> 7<body bgcolor = "#000"> 8<input type = "button" onclick="move();" value="GO!!"><br> 9<canvas id = "mycanvas" width = "1500" height = "1000"></canvas> 10<script> 11 var canvas = document.getElementById('mycanvas'); 12 var ctx = canvas.getContext('2d'); 13 var x = 100; 14 var y = 100; 15 ctx.beginPath(); 16 ctx.fillStyle = 'rgb(255,0,0)'; 17 ctx.arc(x, y, 50, 0, 360 / 180 * Math.PI); 18 ctx.fill(); 19 20 function drow(){ 21 ctx.clearRect(0,0,1500,1000); 22 x += 10; 23 ctx.beginPath(); 24 ctx.fillStyle = 'rgb(255,0,0)'; 25 ctx.arc(x, y, 50, 0, 360 / 180 * Math.PI); 26 ctx.fill(); 27 if(x > 1500){ 28 stop(); 29 } 30 31 } 32 33 var intervalID; 34 35 function move(){ 36 intervalID = setInterval("drow()",10); 37 } 38 39 40 41 42 function stop(){ 43 clearInterval(intervalID); 44 } 45 46</script> 47</body> 48</html>

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

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

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

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

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

guest

回答3

0

window.onresizeをつかって画面のリサイズを検知します。
そのさいにウィンドウサイズを再取得し、canvasのサイズも再設定します!
bodyのmarginを0にしないと隙間ができます。

html

1<body style="margin:0"> 2<canvas id = "canvasId"> 3</canvas> 4<script> 5 var canvas = document.getElementById("canvasId") 6 var context = canvas.getContext("2d") 7 var w = window.innerWidth 8 var h = window.innerHeight 9 canvas.width = w 10 canvas.height = h 11 context.fillStyle = "green" 12 context.fillRect(0,0,w,h) 13 window.onresize = function(){ 14 w = window.innerWidth 15 h = window.innerHeight 16 canvas.width = w 17 canvas.height = h 18 context.fillStyle = "green" 19 context.fillRect(0,0,w,h) 20 } 21</script>

投稿2021/11/03 02:27

9nahito

総合スコア45

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

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

0

canvasサイズを1000×1500にしていますが、数値ではなくオートで画面いっぱいまでcanvasにする方法を教えてください。

KenTerada さんが書かれている通りに画面サイズを取得して、

javascript

1var canvas = document.getElementById('mycanvas'); 2canvas.width = window.innerWidth || document.documentElement.clientWidth 3 || document.body.clientWidth; 4canvas.height = window.innerHeight || document.documentElement.clientHeight 5 || document.body.clientHeight;

のように canvas の width や height を指定すればよいと思います。

また、その際に css で次のようにしておくと、余計なマージンやスクロールバーがなくなって良いと思います。

css

1html, body { 2 margin: 0; 3 padding: 0; 4 overflow: hidden; 5}

どうすれば左に帰ってくるようにできますか?

drowx += 10; で右へ動かしているので、移動量を変数にして、右端までいったら変数の値を -10 にするとよいでしょう。

あと、drow じゃなくて draw だと思います。

canvasを画面いっぱいに表示した場合今までだと~~

canvas.width に幅が入っているのでそれを使うと良いです。

投稿2015/07/25 15:39

編集2015/07/26 01:14
ngyuki

総合スコア4514

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

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

0

基本的にJavaScriptでは
「window.innerWidth」が画面のうち表示部分の幅を,
「window.innerHeight」が高さを保存している変数だったと思います.

IE8以下では対応していないという噂で,
「window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;」
「window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;」
とIEにも対応させられるそうです.
javascript - How Do I Get innerWidth in Internet explorer 8 - Stack Overflow

投稿2015/07/25 10:07

編集2015/07/25 10:16
KenTerada

総合スコア751

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問