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

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

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

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

JavaScript

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

Q&A

解決済

1回答

1497閲覧

Canvas Animation, 痕が残ってしまう

Kaede0902

総合スコア32

canvas

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

JavaScript

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

0グッド

1クリップ

投稿2018/10/30 11:28

オバケを動かしたいのですが、書いたオバケをrequestAnimationFrameで動かそうとしても前のが残ってしまいます。
clearRect()はできてるつもりなのですが、なにがおかしいのでしょうか?

html

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>HalloWeen Ghost</title> 6 <style> 7 canvas { background: #000; 8 width: 100%; height: 100%;} 9 body {margin: 0;} 10 </style> 11 12</head> 13<body> 14 <canvas></canvas> 15<script> 16 // Background: glay by CSS 17 // This is Canvas Grid Line for drawing 18 19 // Lightgreen by every 500px line 20 // white line by 100px line 21 // glay by 50px. 22 var canvas = document.querySelector('canvas'); 23 var cW = canvas.width = window.innerWidth; 24 var cH = canvas.height = window.innerHeight; 25 var c = canvas.getContext('2d'); 26 27 function CenterLine() { 28 c.lineWidth = 1; 29 c.moveTo(0,cH*.5); 30 c.lineTo(cW,cH*.5); 31 c.moveTo(cW*.5,0); 32 c.lineTo(cW*.5,cH); 33 c.stroke(); 34 } 35 36 37 var gX = cW*.40; 38 var gY = cH*.60; 39 var gXE = cW*.60; 40 var gYE = cH*.60; 41 42 var gPX = cW/2; 43 var gPY = 0; 44 45 var gW = gXE - gX; 46 47 var gF = cH*0.04; 48 // 3D one. 49 // (40%,60%) to (60%,60%) 50 // point: (50%,0%) 51 52 function drawGhost() { 53 c.lineWidth = 20; 54 c.strokeStyle = '#fff'; 55 c.lineJoin = "round"; 56 c.lineCap = 'round'; 57 c.moveTo(gX, gY); 58 c.quadraticCurveTo(gPX,gPY, gXE,gYE); 59 c.stroke(); 60 c.moveTo(gX,gY); 61 c.lineTo(gX+(gW/6),gY-gF); 62 c.lineTo(gX+(gW/6)*2,gY); 63 c.lineTo(gX+(gW/6)*3,gY-gF); 64 c.lineTo(gX+(gW/6)*4,gY); 65 c.lineTo(gX+(gW/6)*5,gY-gF); 66 c.lineTo(gXE,gYE); 67 c.stroke(); 68 } 69 function drawEye() { 70 c.fillStyle = '#fff' 71 c.moveTo(rEyeX,EyeY); 72 c.arc(rEyeX,EyeY,gW*.02, 0,9,false); 73 c.moveTo(lEyeX,EyeY); 74 c.arc(lEyeX,EyeY,gW*.02, 0,10,false); 75 c.stroke(); 76 } 77 var rEyeX = cW*.5 + gW/8; 78 var EyeY = cH*.5 - gW/4; 79 80 var lEyeX = cW*.5 - gW/8; 81 82 83 function draw() { 84 c.clearRect(0,0,cW,cH); 85 drawGhost(); 86 drawEye(); 87 //CenterLine(); 88 gX++; 89 gY++; 90 gXE++; 91 gYE++; 92 93 gPX++; 94 gPY++; 95 requestAnimationFrame(draw); 96 } 97 draw(); 98 99 100 101 console.log('gX,gY'+gX,gY); 102 console.log('gXE, gYE:'+gXE,gYE); 103 console.log('cW: '+ cW); 104 console.log('gW: '+ gW); 105 106 107 </script> 108</body> 109</html>

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

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

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

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

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

guest

回答1

0

ベストアンサー

stroke()の呼び出しに対して、beginPath()を呼ぶようにしてください。

javascript

1function drawGhost() { 2 c.lineWidth = 20; 3 c.strokeStyle = '#fff'; 4 c.lineJoin = "round"; 5 c.lineCap = 'round'; 6 7 c.beginPath() //追加 8 c.moveTo(gX, gY); 9 c.quadraticCurveTo(gPX,gPY, gXE,gYE); 10 c.stroke(); 11 12 c.beginPath() //追加 13 c.moveTo(gX,gY); 14 c.lineTo(gX+(gW/6),gY-gF); 15 c.lineTo(gX+(gW/6)*2,gY); 16 c.lineTo(gX+(gW/6)*3,gY-gF); 17 c.lineTo(gX+(gW/6)*4,gY); 18 c.lineTo(gX+(gW/6)*5,gY-gF); 19 c.lineTo(gXE,gYE); 20 c.stroke(); 21}

lineTo()を呼び出すと、コンテキストに描画する線の情報を記録します。また、stroke()を呼び出すと、コンテキストに記録されている線の情報を元に、線を描画します。

lineTo()で記録された線の情報は、stroke()で線を描画しても破棄されません。なので、毎フレームごとに描画される線の情報が溜まっていくため、前のオバケが残ってしまっています。
clearRect()自体は正常に動作しており、呼び出した直後は画面上から線は消去されています。しかし、次のstroke()が呼び出された時点で、これまでに描画した全ての線が再描画されてしまうため、前のオバケが残ってしまっているようになっています。)

beginPath()を呼べば、コンテキストに記録された線の情報を破棄できるため、上記のようなコードにすれば、想定通りの描画になります。

投稿2018/10/30 13:25

編集2018/10/30 13:29
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

Kaede0902

2018/10/30 14:56

RYNOさんありがとうございました!!! beginPath()つけなくても動くと思ってましたが破棄のためにあったのですね!! 助かりました!!またよかったらお願いします!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問