javascript - 带链接的可点击 Canvas 按钮

Question

我有以下 Canvas 。我希望这样当用户单击 Canvas 时，我将转到 google.com，并且我想保留 button 元素。这是我的代码:

//set the variables
var a = document.getElementById('canvas'),
    c = a.getContext('2d'),
    a.style.width = '200px';
    a.style.height = '50px';
    area = w * h,
    particleNum = 300,
    ANIMATION;

var particles = [];


//create the particles
function Particle(i) {
  this.id = i;
  this.hue =  rand(50, 0, 1);
  this.active = false;
}

Particle.prototype.build = function() {
  this.x = w / 2;
  this.y = h / 2;
  this.r = rand(7, 2, 1);
  this.vx = Math.random() * 10 - 5;
  this.vy = Math.random() * 10 - 5;
  this.gravity = .01;
  this.opacity = Math.random() + .5;
  this.active = true;

  c.beginPath();
      c.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
  c.fillStyle = "hsla(" + this.hue + ",100%,50%,1)";
  c.fill();
};

Particle.prototype.draw = function() {
  this.active = true;
  this.x += this.vx;
  this.y += this.vy;
  this.vy += this.gravity;
  this.hue -= 0.5;
  this.r = Math.abs(this.r - .05);

  c.beginPath();
      c.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
  c.fillStyle = "hsla(" + this.hue + ",100%,50%,1)";
  c.fill();

  // reset particle
  if(this.r <= .05) {
    this.active = false;
  }
};


//functionality
function drawScene() {
  c.fillStyle = "black";
  c.fillRect(0,0,w,h);

  for(var i = 0; i < particles.length; i++) {
    if(particles[i].active === true) {
      particles[i].draw();
    } else {
      particles[i].build();
    }
  }

      ANIMATION = requestAnimationFrame(drawScene);
}

function initCanvas() {
  var s = getComputedStyle(a);

  if(particles.length) {
    particles = [];
    cancelAnimationFrame(ANIMATION);
    ANIMATION;
    console.log(ANIMATION);
  }

  w = a.width = window.innerWidth;
    h = a.height = window.innerHeight;

  for(var i = 0; i < particleNum; i++) {
    particles.push(new Particle(i));
  }

  drawScene();
  console.log(ANIMATION);
}


//init
(function() {
  initCanvas();
  addEventListener('resize', initCanvas, false);
})();


//helper functions
function rand(max, min, _int) {
  var max = (max === 0 || max)?max:1,
      min = min || 0,
      gen = min + (max - min) * Math.random();

  return (_int) ? Math.round(gen) : gen;
};

      #canvas{
        width: 200;
        height: 50;
      }

    <div class="wrapper">
        <a href="index.html">
    <button align=center onclick="handleClick()">
      <canvas width="200" height="50" id="canvas" align=center></canvas>
      <span class="text">SUBMIT</span>
    </button>
        </a>
    </div>

尽管如此，我只看到了按钮，没有看到 Canvas 。我该如何解决这个问题？

Answer 1

你实际上有很多错误，伙计(变量声明是最大的问题)，但是通过跟踪错误会给你一个修复它的方法，我不知道这是否是你想要的修复。

//set the variables
var a = document.getElementById('canvas'),
  c = a.getContext('2d');
a.style.width = '200px';
a.style.height = '50px';
var w, h;
var area = w * h,
  particleNum = 300,
  ANIMATION;

var particles = [];


//create the particles
function Particle(i) {
  this.id = i;
  this.hue = rand(50, 0, 1);
  this.active = false;
}

Particle.prototype.build = function() {
  this.x = w / 2;
  this.y = h / 2;
  this.r = rand(7, 2, 1);
  this.vx = Math.random() * 10 - 5;
  this.vy = Math.random() * 10 - 5;
  this.gravity = 0.01;
  this.opacity = Math.random() + .5;
  this.active = true;

  c.beginPath();
  c.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
  c.fillStyle = "hsla(" + this.hue + ",100%,50%,1)";
  c.fill();
};

Particle.prototype.draw = function() {
  this.active = true;
  this.x += this.vx;
  this.y += this.vy;
  this.vy += this.gravity;
  this.hue -= 0.5;
  this.r = Math.abs(this.r - 0.05);

  c.beginPath();
  c.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
  c.fillStyle = "hsla(" + this.hue + ",100%,50%,1)";
  c.fill();

  // reset particle
  if (this.r <= 0.05) {
    this.active = false;
  }
};


//functionality
function drawScene() {
  c.fillStyle = "black";
  c.fillRect(0, 0, w, h);

  for (var i = 0; i < particles.length; i++) {
    if (particles[i].active === true) {
      particles[i].draw();
    } else {
      particles[i].build();
    }
  }

  ANIMATION = requestAnimationFrame(drawScene);
}

function initCanvas() {
  var s = getComputedStyle(a);

  if (particles.length) {
    particles = [];
    cancelAnimationFrame(ANIMATION);
    ANIMATION;
    console.log(ANIMATION);
  }

  w = a.width = window.innerWidth;
  h = a.height = window.innerHeight;

  for (var i = 0; i < particleNum; i++) {
    particles.push(new Particle(i));
  }

  drawScene();
  console.log(ANIMATION);
}


//init
(function() {
  initCanvas();
  addEventListener('resize', initCanvas, false);
})();


//helper functions
function rand(max, min, _int) {
  var max = (max === 0 || max) ? max : 1,
    min = min || 0,
    gen = min + (max - min) * Math.random();

  return (_int) ? Math.round(gen) : gen;
};

 #canvas {
   width: 200px;
   height: 50px;
 }

<div class="wrapper">
  <a href="index.html">
    <button align=center onclick="handleClick()">
      <canvas width="200" height="50" id="canvas" align=center> </canvas>
      <span class="text">SUBMIT</span>
    </button>
  </a>
</div>