オバケを動かしたいのですが、書いたオバケを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>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/30 14:56
2018/10/30 14:59