現在canvasでランダムに円を10個づつ書くというコードを書いています
下記にコードを載せます
そこで問題がありまして
・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>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。