Javascript 为什么这个clearInterval没有到达var,尽管它被设置为全局的?
创建每个圆对象后,当鼠标向下时,它的大小应增加,当鼠标向上时,它应停止。clearInterval似乎没有到达内部变量“growLoop”,即使它首先声明为全局变量(这是关于同一问题的许多其他帖子的建议)。在控制台中,它显示growLoop未定义,但它在第95行中定义,对吗? 而且,时间间隔似乎随着每一个新圆圈的创建而减少,并且它们增长得更快。setInterval的值如何变化Javascript 为什么这个clearInterval没有到达var,尽管它被设置为全局的?,javascript,html,canvas,Javascript,Html,Canvas,创建每个圆对象后,当鼠标向下时,它的大小应增加,当鼠标向上时,它应停止。clearInterval似乎没有到达内部变量“growLoop”,即使它首先声明为全局变量(这是关于同一问题的许多其他帖子的建议)。在控制台中,它显示growLoop未定义,但它在第95行中定义,对吗? 而且,时间间隔似乎随着每一个新圆圈的创建而减少,并且它们增长得更快。setInterval的值如何变化 //set up canvas var canvas = document.getElementById("
//set up canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var circles = [];
//create circle
function create(location) {
circles.push({
x: location.x,
y: location.y,
radius: 10,
color: '#' + Math.floor(Math.random() * 16777215).toString(16)
});
}
//figure out mouse position
var rect = document.getElementById("canvas").getBoundingClientRect();
// Get canvas offset on page
var offset = {
x: rect.left,
y: rect.top
};
function isOnCanvas(a) {
if ((a.x >= 0 && a.x <= rect.width) && (a.y >= 0 && a.y <= rect.height)) {
return true;
}
return false;
}
function isOnCircle(a) {
var i = 0,
l = circles.length,
x, y, d, c;
for (; i < l; ++i) {
c = circles[i];
x = a.x - c.x;
y = a.y - c.y;
d = (a.radius || 10) + c.radius;
if (x * x + y * y <= d * d) {
return true;
}
}
return false;
}
// draw all circles
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < circles.length; i++) {
var p = circles[i];
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI);
ctx.fillStyle = p.color;
ctx.fill();
}
}
//make last drawn circle 1px bigger
function grow(){
var a = circles[circles.length-1];
a.radius += 1;
}
//find percentage of canvas filled in
var totalSpace = canvas.width * canvas.height;
var totalFilled = function () {
total = 0;
for (var i = 0; i < circles.length; i++) {
var p = circles[i];
total += Math.PI * Math.pow(p.radius, 2);
}
return total;
console.log(total);
}
function findPercentage() {
return (totalFilled() / totalSpace) * 100;
}
function updateInfo() {
percentage = findPercentage();
document.getElementById("percentage").innerHTML = "You've filled in " + percentage.toFixed(1) + "%";
}
//do all the stuff
var animate = function(){
draw();
grow();
updateInfo();}
var growLoop = 0;
window.onmousedown = function (e) {
// get event location on page offset by canvas location
var location = {
x: e.pageX - offset.x,
y: e.pageY - offset.y
};
if (isOnCanvas(location) && !isOnCircle(location)) {
create(location);
var growLoop = setInterval(animate, 100);
}
};
window.onmouseup = function (e) {
clearInterval(growLoop);
}
window.onmouseout = function (e) {
clearInterval(growLoop);
}
//设置画布
var canvas=document.getElementById(“canvas”);
var ctx=canvas.getContext(“2d”);
var循环=[];
//创建圆
函数创建(位置){
推({
x:location.x,
y:地点,y,
半径:10,
颜色:'#'+Math.floor(Math.random()*16777215).toString(16)
});
}
//找出鼠标的位置
var rect=document.getElementById(“画布”).getBoundingClientRect();
//获取页面上的画布偏移量
变量偏移={
x:rect.left,
y:rect.top
};
功能isOnCanvas(a){
如果((a.x>=0&&a.x=0&&a.y
通过在此处添加var
可以声明一个内部变量,该变量也被命名为growLoop
,并且不分配给全局变量。删除var
growLoop = setInterval(animate, 100);
通过在此处添加var
可以声明一个内部变量,该变量也被命名为growLoop
,并且不分配给全局变量。删除var
growLoop = setInterval(animate, 100);
通过在此处添加var
可以声明一个内部变量,该变量也被命名为growLoop
,并且不分配给全局变量。删除var
growLoop = setInterval(animate, 100);
通过在此处添加var
可以声明一个内部变量,该变量也被命名为growLoop
,并且不分配给全局变量。删除var
growLoop = setInterval(animate, 100);