###前提・実現したいこと
JavaScriptで、canvas上をクリックすると等スピードで広がる波紋を発生させたいと考えています。
が、下記エラーが発生したため原因を追求すべく質問を投稿させていただきました。
###発生している問題・エラーメッセージ
JavaScriptでcanvas上をクリックすると波紋が発生するスクリプトを書いてみたのですが、クリックをするたびに波紋の広がるスピードがあがってしまいます。
エラーは見つからず。
###該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<meta charset="utf-8"> 4<head> 5 <title>Puddle</title> 6 <link rel="stylesheet" href="style.css"> 7 <link href="https://fonts.googleapis.com/css?family=Roboto|Barrio" rel="stylesheet"> 8</head> 9<body> 10 <header> 11 <p>Puddle</p> 12 </header> 13 <div class="canvas-box"> 14 <canvas width="1000" height="1000" id="canvas"></canvas> 15 </div> 16 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 17 <script src="script.js"></script> 18</body> 19</html>
css
1*{ 2 margin: 0; 3 padding: 0; 4} 5 6header{ 7 background-color: white; 8 text-align: center; 9 font-family: 'Barrio', cursive; 10} 11 12header p{ 13 height: 100px; 14 line-height: 100px; 15 color: #80DEEA; 16 font-size: 50px; 17} 18 19.canvas-box{ 20 width: 1000px; 21 height: 1000px; 22 margin: 0 auto; 23} 24 25#canvas{ 26/* width: 1000px; 27 height: 1000px;*/ 28 background-color: #212F3D; 29 /*border: 1px solid;*/ 30}
JavaScript
1window.requestAnimationFrame = 2window.requestAnimationFrame || 3window.mozRequestAnimationFrame || 4window.webkitRequestAnimationFrame || 5window.msRequestAnimationFrame || 6function(cb) {setTimeout(cb, 17);}; 7 8var canvas = document.getElementById('canvas'); 9var ctx = canvas.getContext('2d'); 10var radius = 10; 11var ripples = []; 12 13$('#canvas').on('click',function(event) { 14 var offsetX = event.offsetX; 15 var offsetY = event.offsetY; 16 var ripple = new Ripple(offsetX, offsetY); 17 ripples.push(ripple); 18 initialize(); 19}); 20 21function Ripple(offsetX, offsetY){ 22 this.offsetX = offsetX; 23 this.offsetY = offsetY; 24 this.radius = radius; 25} 26 27function initialize(){ 28 //canvasをクリア 29 clear(); 30 31 //配列の要素に対してここにrenderメソッドを実行 32 ripples.forEach(function(element){ 33 element.render(); 34 }) 35 36 if(radius<100){ 37 requestAnimationFrame( initialize ); 38 }else{ 39 clear(); 40 } 41} 42 43Ripple.prototype.render = function(){ 44 if(this.radius < 100){ 45 //半径を1広げる 46 this.updateRipple(); 47 //波紋を描写する 48 this.create(); 49 } 50} 51 52Ripple.prototype.create = function() { 53 ctx.beginPath(); 54 var startAngle = 0; 55 var endAngle = 360 * Math.PI / 180; 56 ctx.arc(this.offsetX, this.offsetY, this.radius, startAngle, endAngle, true); 57 ctx.strokeStyle = "#ffffff"; 58 ctx.stroke(); 59} 60 61Ripple.prototype.updateRipple = function() { 62 if(this.radius < 100)this.radius++; 63 console.log(this.radius); 64} 65 66function clear() { 67 ctx.clearRect(0,0,canvas.width,canvas.height); 68}
###試したこと
初めは半径の増加率があがっている
(本来半径は1ずつ上がるが、それが2,3,4ずつ上がってしまう現象)
が起きているのかと思い、console.log(this.radius)で増加率が変化していないか調べましたが、
ちゃんと+1ずつされておりました。
###補足情報(言語/FW/ツール等のバージョンなど)
Sublime Text 3
Google Chrome 56.0.2924.87
Windows 8.1
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/20 07:17