点击按钮使Javascript代码正常工作

时间：2015-06-20 13:25:02

标签： javascript button

如何通过单击按钮并禁用自动启动来完成此工作？

＆＃13;
＆＃13; 
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;

// création d'un tableau
particle = [];
particleCount = 0,
  gravity = 0.1,
  colors = [
    '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
    '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
    '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
    '#FF5722', '#795548'
  ];

for (var i = 0; i < 90; i++) {

  particle.push({
    x: width / 2,
    y: height / 2,
    boxW: randomRange(5, 20),
    boxH: randomRange(5, 20),
    size: randomRange(2, 8),

    spikeran: randomRange(3, 5),

    velX: randomRange(-8, 8),
    velY: randomRange(-50, -10),

    angle: convertToRadians(randomRange(0, 360)),
    color: colors[Math.floor(Math.random() * colors.length)],
    anglespin: randomRange(-0.2, 0.2),

    draw: function() {

      context.save();
      context.translate(this.x, this.y);
      context.rotate(this.angle);
      context.fillStyle = this.color;
      context.beginPath();
      // drawStar(0, 0, 5, this.boxW, this.boxH);
      context.fillRect(
        this.boxW / 2 * -1, this.boxH / 2 * -1, 
        this.boxW, this.boxH
      );
      context.fill();
      context.closePath();
      context.restore();
      this.angle += this.anglespin;
      this.velY *= 0.999;
      this.velY += 0.2;

      this.x += this.velX;
      this.y += this.velY;
      if (this.y < 0) {
        this.velY *= -0.2;
        this.velX *= 0.9;
      };
      if (this.y > height) {
        this.anglespin = 0;
        this.y = height;
        this.velY *= -0.2;
        this.velX *= 0.9;
      };
      if (this.x > width || this.x < 0) {

        this.velX *= -0.5;
      };

    },

  });

}
r1 = {
  x: width / 2 - 150,
  y: height / 2 - 150,
  width: 300,
  height: 300,
  velX: 0,
  velY: -10,
  img: loadImage(
    "http://image.noelshack.com/fichiers/2015/12/1427051642-smiley.png"
  ),
  alphatop: 0
};

function drawScreen() {
  size = 50;
  pFontName = "Lucida Sans Unicode";
  context.font = size + "pt " + pFontName;
  context.fillText("Confetti party !!!", width / 2, 150);
  if (r1.alphatop < 1) {
    r1.alphatop += 0.01;
  } else {
    r1.alphatop = 1;
  }
  context.globalAlpha = r1.alphatop;
  context.drawImage(r1.img, r1.x, r1.y);
  context.textAlign = 'center';

  if (r1.alphatop === 1) {
    r1.velY *= 0.999;
    r1.velY += 0.3;

    r1.x += r1.velX;
    r1.y += r1.velY;
  }

  if (r1.y + r1.height > height) {
    r1.anglespin = 0;
    r1.y = height - r1.height;
    r1.velY *= -0.8;
    r1.velX *= 0.9;
  };

  context.globalAlpha = 1;
  for (var i = 0; i < particle.length; i++) {
    particle[i].draw();

  }

}

function loadImage(url) {
  var img = document.createElement("img");
  img.src = url;
  return img;
}

function update() {

  context.clearRect(0, 0, width, height);

  drawScreen();

  requestAnimationFrame(update);
}

update();

function randomRange(min, max) {
  return min + Math.random() * (max - min);
}

function randomInt(min, max) {
  return Math.floor(min + Math.random() * (max - min + 1));
}

function convertToRadians(degree) {
  return degree * (Math.PI / 180);
}

function drawStar(cx, cy, spikes, outerRadius, innerRadius, color) {
  var rot = Math.PI / 2 * 3;
  var x = cx;
  var y = cy;
  var step = Math.PI / spikes;

  context.strokeSyle = "#000";
  context.beginPath();
  context.moveTo(cx, cy - outerRadius)
  for (i = 0; i < spikes; i++) {
    x = cx + Math.cos(rot) * outerRadius;
    y = cy + Math.sin(rot) * outerRadius;
    context.lineTo(x, y)
    rot += step

    x = cx + Math.cos(rot) * innerRadius;
    y = cy + Math.sin(rot) * innerRadius;
    context.lineTo(x, y)
    rot += step
  }
  context.lineTo(cx, cy - outerRadius)
  context.closePath();
  context.fillStyle = color;
  context.fill();

}
＆＃13; 
html, body{
padding:0;
margin:0;

  background-image: url(
    "http://image.noelshack.com/fichiers/2015/12/1427051641-geometry.png"
  );
  width: 100%;
  height: 100%;
  cursor: default;   text-align: center;

  font-family: 'PT Sans', sans-serif;
}
canvas{
position:absolute;
	left:0;
	top:0;
	z-index:0;
	border:0px solid #000;
}
＆＃13; 
<canvas id="canvas"></canvas>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

将代码包装在一个函数中，然后添加一个调用该函数的按钮。

function RunIt(){
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;

// création d'un tableau
particle = [];
particleCount = 0,
  gravity = 0.1,
  colors = [
    '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
    '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
    '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
    '#FF5722', '#795548'
  ];

for (var i = 0; i < 90; i++) {

  particle.push({
    x: width / 2,
    y: height / 2,
    boxW: randomRange(5, 20),
    boxH: randomRange(5, 20),
    size: randomRange(2, 8),

    spikeran: randomRange(3, 5),

    velX: randomRange(-8, 8),
    velY: randomRange(-50, -10),

    angle: convertToRadians(randomRange(0, 360)),
    color: colors[Math.floor(Math.random() * colors.length)],
    anglespin: randomRange(-0.2, 0.2),

    draw: function() {

      context.save();
      context.translate(this.x, this.y);
      context.rotate(this.angle);
      context.fillStyle = this.color;
      context.beginPath();
      // drawStar(0, 0, 5, this.boxW, this.boxH);
      context.fillRect(this.boxW / 2 * -1, this.boxH / 2 * -1, this.boxW, this.boxH);
      context.fill();
      context.closePath();
      context.restore();
      this.angle += this.anglespin;
      this.velY *= 0.999;
      this.velY += 0.2;

      this.x += this.velX;
      this.y += this.velY;
      if (this.y < 0) {
        this.velY *= -0.2;
        this.velX *= 0.9;
      };
      if (this.y > height) {
        this.anglespin = 0;
        this.y = height;
        this.velY *= -0.2;
        this.velX *= 0.9;
      };
      if (this.x > width || this.x < 0) {

        this.velX *= -0.5;
      };

    },

  });

}
r1 = {
  x: width / 2 - 150,
  y: height / 2 - 150,
  width: 300,
  height: 300,
  velX: 0,
  velY: -10,
  img: loadImage("http://image.noelshack.com/fichiers/2015/12/1427051642-smiley.png"),
  alphatop: 0
};

function drawScreen() {
  size = 50;
  pFontName = "Lucida Sans Unicode";
  context.font = size + "pt " + pFontName;
  context.fillText("Confetti party !!!", width / 2, 150);
  if (r1.alphatop < 1) {
    r1.alphatop += 0.01;
  } else {
    r1.alphatop = 1;
  }
  context.globalAlpha = r1.alphatop;
  context.drawImage(r1.img, r1.x, r1.y);
  context.textAlign = 'center';

  if (r1.alphatop === 1) {
    r1.velY *= 0.999;
    r1.velY += 0.3;

    r1.x += r1.velX;
    r1.y += r1.velY;
  }

  if (r1.y + r1.height > height) {
    r1.anglespin = 0;
    r1.y = height - r1.height;
    r1.velY *= -0.8;
    r1.velX *= 0.9;
  };

  context.globalAlpha = 1;
  for (var i = 0; i < particle.length; i++) {
    particle[i].draw();

  }

}

function loadImage(url) {
  var img = document.createElement("img");
  img.src = url;
  return img;
}

function update() {

  context.clearRect(0, 0, width, height);

  drawScreen();

  requestAnimationFrame(update);
}

update();

function randomRange(min, max) {
  return min + Math.random() * (max - min);
}

function randomInt(min, max) {
  return Math.floor(min + Math.random() * (max - min + 1));
}

function convertToRadians(degree) {
  return degree * (Math.PI / 180);
}

function drawStar(cx, cy, spikes, outerRadius, innerRadius, color) {
  var rot = Math.PI / 2 * 3;
  var x = cx;
  var y = cy;
  var step = Math.PI / spikes;

  context.strokeSyle = "#000";
  context.beginPath();
  context.moveTo(cx, cy - outerRadius)
  for (i = 0; i < spikes; i++) {
    x = cx + Math.cos(rot) * outerRadius;
    y = cy + Math.sin(rot) * outerRadius;
    context.lineTo(x, y)
    rot += step

    x = cx + Math.cos(rot) * innerRadius;
    y = cy + Math.sin(rot) * innerRadius;
    context.lineTo(x, y)
    rot += step
  }
  context.lineTo(cx, cy - outerRadius)
  context.closePath();
  context.fillStyle = color;
  context.fill();

}
}
html, body{
padding:0;
margin:0;

  background-image: url("http://image.noelshack.com/fichiers/2015/12/1427051641-geometry.png");
  width: 100%;
  height: 100%;
  cursor: default;   text-align: center;

  font-family: 'PT Sans', sans-serif;
}
canvas{
position:absolute;
	left:0;
	top:0;
	z-index:0;
	border:0px solid #000;
}
<canvas id="canvas"></canvas>
<button onClick="RunIt();">Run It</button>

相关问题
最新问题