js实现canvas粒子碰撞运动效果代码-html代码-BFW代码库

js实现canvas粒子碰撞运动效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas粒子碰撞运动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en"><head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  overflow: hidden;
  background: #111;
  color: #fff;
  font-family: monospace;
  font-size:16px;
}

.wrapper {
  position: relative;
}

.dimensions {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #fff;
  color: #222;
  padding: 10px;
  border-radius: 5px;
  opacity: 0.5;
}
</style>

</head>

<body translate="no">
  <div id="canvas-wrapper" class="wrapper"><canvas id="board" width="1536" height="294"></canvas></div>

  
      <script >
function main()
{

  // Grab the window width and height
  w = window.innerWidth;
  h = window.innerHeight;

  // Block variables
  number_of_blocks = 200;
  block_size = 8;
  block_velocity = 6;

  // Add the canvas element to the dom and initiate
  var canvas_wrapper = document.getElementById('canvas-wrapper');
  canvas_wrapper.innerHTML = '';
  canvas_wrapper.innerHTML += '<canvas id="board" width="' + w + '" height="' + h + '"></canvas>';
  // For debugging, show window width and height
  //canvas_wrapper.innerHTML += '<div class="dimensions">' + w + 'px x ' + h + 'px</div>';
  var canvas = document.getElementById('board');
  c = canvas.getContext('2d');

  // Create the blocks!
  createBlocks();

  // Create array for debris
  debris = [];

  // Create the render loop
  rendere.........完整代码请登录后点击上方下载按钮下载查看