JavaScriptのCanvasでsetInterval

現在canvasでランダムに円を１０個づつ書くというコードを書いています
下記にコードを載せます
そこで問題がありまして
・stopボタンでインターバルを止めたいのに止まらない
ということに悩まされています。
どう描くのが正しいのでしょうか？

JavaScript
1<!doctype html>
2<html>
3<head>
4<style>
5	.btn{
6		background-color:#0000CD;
7		border-style: none;
8		color:#FFF;
9		font-size:50px;
10	}
11	
12</style>
13</head>
14<body bgcolor = "#000">
15<input type = "button" value = "click" onclick = "drow();" class = "btn"><input type = "button" value = "stop" onclick = "stop();" class = "btn"><br>
16<canvas id = "mycanvas" width = "1500" height = "1000"></canvas>
17<script>
18var canvas = document.getElementById('mycanvas');
19var ctx = canvas.getContext('2d');
20var count = 0;
21function show(){
22    
23    for (var i = 0; i < 10; i++) {
24		ctx.beginPath();
25		var r = Math.floor(Math.random() * 256);
26		var g = Math.floor(Math.random() * 256);
27		var b = Math.floor(Math.random() * 256);
28		var y = Math.floor(Math.random() * 950);
29		var x = Math.floor(Math.random() * 1450);
30		var pi = Math.floor(Math.random() * 50);
31		ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
32		ctx.arc(x, y, pi, 0, 360 / 180 * Math.PI);
33		ctx.fill();
34		count += 1;
35		console.log(count);
36		
37    }
38}
39
40function drow(){
41	setInterval("show()",1000);
42	
43}
44
45function stop(){
46	clearInterval("drow");
47}
48</script>
49</body>
50</html>

行動規範の内容に同意します

回答6件

はじめまして、こんにちは。

setIntervalを止めるにはsetIntervalの返り値を利用する必要があるか思いました。

javascript
1var intervalID;
2
3function drow(){
4    intervalID = setInterval("show()",1000);
5}
6
7function stop(){
8    clearInterval(intervalID);
9}

1秒後に新たに円を書き直す際は、
初めにCanvasを背景色で塗りつぶしてみてはいかがでしょうか。

javascript
1function show(){
2    // 円を描き始める前にここでCanvasを塗りつぶす
3    for (var i = 0; i < 10; i++) {

動くか試していませんがご参考までに。

投稿2015/07/23 05:03

退会済みユーザー

総合スコア0

setInterval("show()",1000);

↓
timerID = setInterval("show()",1000);

clearInterval("drow");

↓
clearInterval(timerID);

上記のように2行修正すれば、ご質問の前半の要件は満たします。

なお、分かりやすさを優先して必要最小限の修正にしましたが、
グローバルで「Var timerID;」と宣言するほうが良い書き方ですし、
そもそもグローバル変数を多用しないのがさらに良い書き方です。

投稿2015/07/23 05:01

編集2015/07/23 05:08

LLman

総合スコア5592

setTimeout(関数など,遅延時間)とかはどうですか？

html
1<canvas id="canvasId">
2</canvas>
3
4<script>
5    var canvas = document.getElementById("canvasId")
6    var context = canvas.getContext("2d")
7    var w = window.innerWidth
8    var h = window.innerHeight
9    canvas.width = w
10    canvas.height = h
11    var limit = 9//円をいっぱい描くイベントの回数制限
12    var limitCircle = 10
13    var repeatcount = 0
14    var circlecount = 0
15    var x = 0
16    var y = 0
17    var hannkei = 10
18    function draw(){      
19        while(circlecount < limitCircle){
20            circlecount++
21            //パスをリセット
22            context.beginPath()
23            //円の中心座標x,y,半径,開始角度,終了角度,false=時計回りの円
24            x=Math.random()*w
25            y=Math.random()*h
26            context.arc(x,y,hannkei,0,360*Math.PI/180,false)
27            context.fill()
28        }
29        circlecount = 0
30        repeat()
31    }
32    function repeat(){
33        if(repeatcount < limit){
34            setTimeout(draw,1000)
35            repeatcount++
36        }
37    }
38    repeat()
39    
40
41
42</script>

投稿2021/11/03 02:31

編集2021/11/03 02:50

9nahito

総合スコア45

本題とは異なりますがsetIntervalに関数を渡すとき、文字列で渡すより参照で渡した方がいいですよ。

以下は本題となるコードです。他の方が言っているようにsetIntervalの戻り値を利用するのですが以下のようにするとグローバルに定義された関数の数も減り、管理しやすくなるのではないでしょうか。

javascript
1var screenManager={};
2screenManager.show=function (){
3  console.log("test");
4}
5screenManager.drow=function (){
6    screenManager.SI_ID=setInterval(screenManager.show,1000);
7}
8screenManager.stop=function (){
9    clearInterval(screenManager.SI_ID);
10}
11
12screenManager.drow();

ラップしているオブジェクトの命名が微妙なのは気にしないでください……。

投稿2015/07/23 06:29

Cf_cwd

総合スコア730

setInterval は、戻り値としてclearInterval で実行を停止するための ID を返しますので
これを記憶しておいて、clearIntervalの引数に使います。

var retTimer;
:
retTimer = setInterval("show()",1000);
:
clearInterval(retTimer);

投稿2015/07/23 05:09

crow8

総合スコア13

clearInterval には引数として setInterval の戻り値を渡す必要があります。

例えばこんなかんじです。

lang
1var timer = null;
2
3function drow(){
4    if (timer == null) {
5        timer = setInterval("show()",100);
6    }
7}
8
9function stop(){
10    if (timer != null) {
11        clearInterval(timer);
12        timer = null;
13    }
14}