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

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

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

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

JavaScript

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

Q&A

解決済

1回答

252閲覧

Canvas requestAnimationFrame , Scaleが変わらない

Kaede0902

総合スコア32

canvas

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

JavaScript

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

0グッド

0クリップ

投稿2018/09/25 05:38

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>

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

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

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

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

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

guest

回答1

0

ベストアンサー

処理を追ってみればいいのでは?
初回:s = 2、結果:2倍
2回目:s = 1、結果:2倍
3回目:s = 0、結果:0倍
4回目:s = -1、結果:0倍
5回目:s = -2、結果:0倍
……
c.setTransform(1, 0, 0, 1, 0, 0)で元に戻ります。

投稿2018/09/27 06:25

x_x

総合スコア13749

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

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

Kaede0902

2018/11/06 13:58

確かに!!ありがとうございます!!一つ一つ見ていくのくせにします!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問