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

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

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

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

JavaScript

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

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

Q&A

解決済

2回答

2790閲覧

canvas上で、image要素を動かしたい

shiota-genpachi

総合スコア5

canvas

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

JavaScript

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

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

0グッド

0クリップ

投稿2020/04/09 06:40

編集2020/04/09 07:52

canvas上で、image要素く動かしたい

canvas上で、image要素が画面の端から端へとループする動きを作成しようとしています。
しかし、画像が表示されません。
エラーコードメッセージが出ているわけでもありません。

二つ目のコードを元に、ボールの部分をimage要素にしてみようという発想です。

ちなみに、
https://www.cow-aka.jp/akabakojoshi/
の背景で、様々な画像が端から端へとループしているのをみて、canvasを触り始めた次第です。

どなたか、助けていただけないのでしょうか?

javascript

1const canvas = document.getElementById('canvas'); 2 3function onResize() { 4 canvas.width = innerWidth * devicePixelRatio; 5 canvas.height = 1200; 6} 7window.addEventListener('resize', onResize); 8onResize(); 9 10 var ctx = canvas.getContext('2d'); 11 12 var Visual = function(x , y , vx) { 13 this.x = x; 14 this.y = y; 15 this.vx = vx; 16 this.draw = function() { 17 const img = document.createElement('img'); 18 img.src = 'img/mv02.jpg'; 19 img.addEventListener('load', () => { 20 ctx.drawImage(img, this.x, this.y); 21 }); 22 }; 23 this.move = function() { 24 this.x += this.vx; 25 if (this.x > canvas.width + 200) { 26 this.x = x; 27 } 28 }; 29 } 30 31 var myVisual = new Visual(10, 10, 10); 32 33 function clearStage() { 34 ctx.fillStyle = '#AAEDFF'; 35 ctx.fillRect(0, 0, canvas.width, canvas.height); 36 } 37 38 function update() { 39 requestAnimFrame(update); 40 clearStage(); 41 myVisual.draw(); 42 myVisual.move(); 43 } 44 45 window.requestAnimFrame = (function(){ 46 return window.requestAnimationFrame || 47 window.webkitRequestAnimationFrame || 48 window.mozRequestAnimationFrame || 49 window.oRequestAnimationFrame || 50 window.msRequestAnimationFrame || 51 function(callback){ 52 window.setTimeout(callback, 1000 / 60); 53 }; 54 })(); 55 56 update(); 57

ボールの動き↓このボールをimage画像にしたいです

javascript

1const canvas = document.getElementById('canvas'); 2 3function onResize() { 4 canvas.width = innerWidth * devicePixelRatio; 5 canvas.height = 1200; 6} 7window.addEventListener('resize', onResize); 8onResize(); 9 10 var ctx = canvas.getContext('2d'); 11 12var Ball = function(x , y , vx) { 13 this.x = x; 14 this.y = y; 15 this.vx = vx; 16 this.draw = function() { 17 ctx.beginPath(); 18 ctx.fillStyle = '#FF0088'; 19 ctx.arc(this.x, this.y, 30, 0, 2*Math.PI, true); 20 ctx.fill(); 21 }; 22 this.move = function() { 23 this.x += this.vx; 24 if (this.x > canvas.width + 200 ) { 25 this.x = x; 26 } 27 }; 28 } 29 30 var myBall = new Ball(-100, 100, 5); 31 32 function clearStage() { 33 ctx.fillStyle = '#AAEDFF'; 34 ctx.fillRect(0, 0, canvas.width, canvas.height); 35 } 36 37 function update() { 38 requestAnimFrame(update); 39 clearStage(); 40 myBall.draw(); 41 myBall.move(); 42 } 43 44 window.requestAnimFrame = (function(){ 45 return window.requestAnimationFrame || 46 window.webkitRequestAnimationFrame || 47 window.mozRequestAnimationFrame || 48 window.oRequestAnimationFrame || 49 window.msRequestAnimationFrame || 50 function(callback){ 51 window.setTimeout(callback, 1000 / 60); 52 }; 53 })(); 54 55 update(); 56

発生している問題・エラーメッセージ

エラーメッセージはありません

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

yambejp

2020/04/09 06:51

どこか動作確認ができるサイトにアップできませんか?
shiota-genpachi

2020/04/09 06:54

返信ありがとうございます。 恐れ入りますが、未だにローカルサーバーの開発?もできておらず、できません。 申し訳ありません。
yambejp

2020/04/09 07:00

正直提示されたサンプルではチカチカ以前に画像が表示されないようなので・・
shiota-genpachi

2020/04/09 07:05

失礼いたしました。 質問の仕方があまりよくありませんでした。 私の方も、そこで悩んでおります。 そこを解決できた先に、チカチカさせずに画像を動かしたいということでした。
shiota-genpachi

2020/04/09 07:08

ただ、質問内容のところにも記載させていただいたのですが、 ・requestAnimFrameの部分を消すと画像が表示される状態です。しかし、動くことはありません。 ・setTimeOutを使うと、画像も表示され、動くがチカチカする ・requestAnimFrameを使用すると、エラーメッセージは出ないが、画像が表示されなくなる といった状態です。
yambejp

2020/04/09 07:10

あらためて・・・具体的な動作はどうしたいのでしょうか? 動かなくてもいいのでなにか手書きの画像で説明できませんか? その動作はcanvasじゃなくsvgでもよいですか?
shiota-genpachi

2020/04/09 07:19

https://www.cow-aka.jp/akabakojoshi/ このサイトの背景の画像のように、画面の端から端へと画像をループさせたいのです。 svgに関しては、現在、一切知識がありませんので、できればcnavasであれば助かります。
guest

回答2

0

画像はキャッシュして、読み直しが不要な実装にしてください。

アニメーションのフレームにおいて、毎回、画像を読み込もうとしても処理が追いつきません。
teratail requestAnimationFrameのフレームレート

CODEPEN 動くサンプル


アニメーションを実装中は、windowサイズを固定してください。
アニメーションしない状況では onresize イベントを実装せず後から調整します。

投稿2020/04/09 10:04

AkitoshiManabe

総合スコア5432

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

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

shiota-genpachi

2020/04/09 10:56

ご丁寧な回答ありがとうございます。 非常に勉強になります。
guest

0

ベストアンサー

svgはいやだと言われましたが、一応sampleだけあげておきます

投稿2020/04/09 09:31

yambejp

総合スコア114572

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

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

shiota-genpachi

2020/04/09 09:56

迅速に回答していただき、ありがとうございました。 これを機に、勉強してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問