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

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

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

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

JavaScript

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

Q&A

2回答

666閲覧

JavaScript 文字のバウンドアニメーションに残像がついてしまう

pussy_pussy

総合スコア22

canvas

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

JavaScript

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

0グッド

1クリップ

投稿2022/11/16 00:24

前提、実現したいこと

HELLO という文字列を、個々の文字がバウンドしているようなアニメーションを表示したい。
実行環境はローカルのブラウザです。

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

アニメーションは開始するが、文字の残像がついてしまう。

該当のソースコード

html,javascript

1<div id="container"></div> 2<script type="text/javascript"> 3 4var cvs = document.createElement("canvas"); 5 6cvs.width = 500; 7cvs.height = 500; 8document.getElementById('container').appendChild(cvs); 9 10 11var ctx = cvs.getContext("2d"); 12var gravity = 0.5; 13var bounce = -0.7 14var bottom = 450; 15 16var text1 = new Text("H",100,250,10); 17var text2 = new Text("E",150,250,1); 18var text3 = new Text("L",200,250,5); 19var text4 = new Text("L",250,250,1); 20var text5 = new Text("O",300,250,10); 21 22 23function Text(t,x,y,vy) { 24 var me = this; 25 this.x = x; 26 this.y = y; 27 this.vy = vy; 28 29 this.draw = function(ctx) { 30 ctx.font = '50px serif'; 31 ctx.strokeText(t,me.x,me.y); 32 }; 33 34 this.render = function(){ 35 me.vy += gravity; 36 me.y += me.vy; 37 38 if (me.y + 20 > bottom) { 39 me.y = bottom - 20; 40 me.vy *= bounce; 41 } 42 43 me.draw(ctx); 44 } 45 } 46 47 ctx.clearRect(0, 0, 500, 500); 48 ctx.strokeStyle = "black"; 49 ctx.beginPath(); 50 ctx.moveTo(0, bottom); 51 ctx.lineTo(500, bottom); 52 ctx.stroke(); 53 setInterval(text1.render, 30); 54 setInterval(text2.render, 30); 55 setInterval(text3.render, 30); 56 setInterval(text4.render, 30); 57 setInterval(text5.render, 30); 58</script>

試したこと

Text内のrenderで呼び出されているdrawが、文字の描画を行っていることは確認したが、実装のどこに問題点があるかはわからなかった。

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

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

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

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

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

guest

回答2

0

こんなかんじで

javascript

1setInterval(text1.render, 30); 2setInterval(text2.render, 30); 3setInterval(text3.render, 30); 4setInterval(text4.render, 30); 5setInterval(text5.render, 30); 6↓↓↓ 7setInterval(()=>{ 8 ctx.clearRect(0, 0,500,500); 9 text1.render(); 10 text2.render(); 11 text3.render(); 12 text4.render(); 13 text5.render(); 14}, 30);

投稿2022/11/16 01:21

yambejp

総合スコア114572

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

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

0

実装のどこに問題点があるかはわからなかった。

間違っているのは実装ではなく、アルゴリズム(詳細仕様)です。

現状は、同じ紙に、前の文字を残したまま、移動後の文字を描画しています。
描画の前に白紙にする処理を加えてください。

なお、動きをつける場合、若干の残像があるほうが見栄えが良くなることが多いので、そちらもご検討ください。

投稿2022/11/16 00:49

YT0014

総合スコア1708

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問