matterjs实现沙漏动画效果代码-html代码-BFW代码库

matterjs实现沙漏动画效果代码

代码语言：html

所属分类：动画

代码描述：matterjs实现沙漏动画效果代码，显示沙漏通过的粮食量、所用时间和平均每秒通过量。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>

</head>

<body translate="no">
  <div style="display: flex; align-items: start; scale:0.6; margin-top:-20vh">
	<canvas id="hourglassCanvas" width="400" height="500"></canvas>
	<div id="dataDisplay" style="margin-left: 20px; font-family: Arial; font-size: 26px;">
		<p id="grainsPassed">Number of Grains Passed: 0</p>
		<p id="currentTime">Current Time: 00:00.000</p>
	</div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.0.19.0.js"></script>
  
      <script >
let canvas, ctx;
let grains = [];
const numGrains = 2000;
let grainsPassedCenter = 0;
let timerStarted = false;
let timerEnded = false;
let startTime;
let endTime;
let lastGrainPassedTime = null;

const glassThickness = 6;

window.onload = function () {
  initializeCanvas();
  initializeGrains();
  startTimer();
  animate();
};

function initializeCanvas() {
  canvas = document.getElementById("hourglassCanvas");
  ctx = canvas.getContext("2d");
  canvas.width = 800;
  canvas.height = 1000;
}

function initializeGrains() {
  grains = [];
  grainsPassedCenter = 0;
  const startY = canvas.height / 2 - neckHeight / 2 - glassThickness; // Just above the center
  const endY = 120 + glassThickness;.........完整代码请登录后点击上方下载按钮下载查看