canvasのrequestAnimationFrameを使ってのループですが、四角形のx座標は動かしてカーテンは作れるのに、scaleの変更ができません。どこが悪いのでしょうか?
膨らんだり縮めたりしたいです!
javascript
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Ex12</title> 6 <style> 7 canvas { 8 background: rgb(94, 94, 94); 9 width: 100%; height: 100%; 10 } 11 body {margin: 0;} 12 </style> 13 14</head> 15<body> 16 <canvas></canvas> 17<script> 18 var canvas = document.querySelector('canvas'); 19 canvas.width = window.innerWidth; 20 canvas.height = window.innerHeight; 21 var c = canvas.getContext('2d'); 22 function gridLine() { 23 c.lineWidth = 1; 24 var x = 0; var y = 0; 25 c.beginPath(); 26 c.strokeStyle = "#999999"; 27 for (i = 0; i < 50; i++) { 28 c.moveTo(x, 0); 29 c.lineTo(x, 1000); 30 c.moveTo(0, y); 31 c.lineTo(2000, y) 32 c.stroke(); 33 x += 50; y += 50; 34 } 35 var x = 0; var y = 0; 36 c.beginPath(); 37 c.strokeStyle = "#fff"; 38 for (i = 0; i < 50; i++) { 39 c.moveTo(x*2, 0); 40 c.lineTo(x*2, 1000); 41 c.moveTo(0, y*2); 42 c.lineTo(2000, y*2) 43 c.stroke(); 44 x += 50; y += 50; 45 } 46 var x = 0; var y = 0; 47 c.beginPath(); 48 c.strokeStyle = "lightgreen"; 49 for (i = 0; i < 50; i++) { 50 c.moveTo(x*10, 0); 51 c.lineTo(x*10, 1000); 52 c.moveTo(0, y*10); 53 c.lineTo(2000, y*10) 54 c.stroke(); 55 x += 50; y += 50; 56 } 57 } 58 gridLine(); 59 60 61 var a = 45 62 var angle = a * Math.PI/180; 63 var x = 500; var y = 500; 64 var w = 50; var h = 50; 65 var s = 2; 66function draw() { 67 68 c.translate(x + w/2, y + h/2); 69 c.scale(s,s); 70 c.rotate(angle); 71 c.fillStyle = 'red'; 72 c.fillRect(w/-2, h/-2, w, h); 73//ここで大きさを調整 74 if (s < 10) { 75 s--; 76 } else { 77 s++; 78 } 79window.requestAnimationFrame(draw); 80} 81window.requestAnimationFrame(draw); 82 83 84</script> 85</body> 86</html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/06 13:58