Question

是否可以检测Canvas Element是否与主页上的任何html发生冲突？例如，我有一个包含表格，图像和不同按钮的页面。现在我添加了一个雪球落下的帆布元素。

我想通过与画布外的任何元素碰撞来停止像素。这有可能被发现吗？

Answer 1

当然，听起来很可行而且很有趣:)我认为解决方案看起来大致如此。我假设您正在使用或可以使用jQuery，以获得简洁的解决方案。否则它仍然是可能的，但更复杂。

//Look up all DOM elements that should stop the snowflakes
var $elements = $('.collider'); //Add class "collider" to relevant elements in the HTML for easy lookup

//Create an array to store colliding elements' coordinates
var elementCoords = [];

//Look up the canvas element's position
var canvasOffset = canvasElement.offset();

//Loop through all elements and populate the coordinate array. 
//Don't bother storing bottom side as snow falls from above
$elements.each(function(){
  var $this = $(this),
      thisOffset = $this.offset();
  elementCoords.push( { top: thisOffset.top, left: thisOffset.left, right: thisOffset.left + $this.width() } );
});

//Detect collisions inside the animation loop
while(animating){
  elementCoords.forEach(function(coords){
    snowflakes.forEach(function(snowflake){
      var snowflakeGlobalY = snowflake.y + canvasOffset.top,
          snowflakeGlobalX = snowflake.x + canvasOffset.left
      if(snowflakeGlobalY  > coords.top 
          && snowflakeGlobalX  > coords.left 
          && snowflakeGlobalX  < coords.right) {
        //Kill snowflake
      }
    });
  });
}

我还没有对此进行测试，但它至少应该作为解决方案的大纲。如果有许多雪花和/或HTML元素，我想性能可能会成为一个问题。

如何从canvas元素和html元素中检测到碰撞

1 个答案: