js实现canvas重力钟摆摆动弧线动画效果代码-html代码-BFW代码库

js实现canvas重力钟摆摆动弧线动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas重力钟摆摆动弧线动画效果代码

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

<html>

<head>
    <style>
        html {
        	height: 100%;
        }
        body {
        	background-color: #424242;
        	width: 100%;
        	height: 100%;
        	margin: 0px;
        	font-family: Arial;
        	overflow: hidden;
        }
    </style>

</head>

<body><canvas id="chaosPendulum"></canvas>
    <script>
        class Pendulum {
        	constructor(l1, l2, m1, m2, g) {
        		this.g = g;
        
        		this.l1 = l1;
        		this.l2 = l2;
        
        		this.m1 = m1;
        		this.m2 = m2;
        
        		this.a1 = Math.PI;
        		this.a2 = Math.PI / 8;
        
        		this.a1_v = 0;
        		this.a2_v = 0;
        	}
        
        	tick() {
        		this.a1_v += this.calcA1();
        		this.a2_v += this.calcA2();
        
        		this.a1 += this.a1_v;
        		this.a2 += this.a2_v;
        	}
        
        	calcA1() {
        		let num1 = -this.g * (2 * this.m1 + this.m2) * Math.sin(this.a1);
        		let num2 = -this.m2 * this.g * Math.sin(this.a1 - 2 * this.a2);
        		let num3 = -2 * Math.sin(this.a1 - this.a2) * this.m2;
        		let num4 =
        			this.a2_v * this.a2_v * this.l2 +
        			this.a1_v * this.a1_v * this.l1 * Math.cos(this.a1 - this.a2);
        		let den =
        			this.l1 *
        			(2 * this.m1 + this.m2 - this.m2 * Math.cos(2 * this.a1 - 2 * this.a2));
        		return (num1 + num2 + num3 * num4) / den;
        	}
        
        	calcA2() {
        		let num1 = 2 * Math.sin(this.a1 - this.a2);
        		let num2 = this.a1_v * this.a1_v * this.l1 * (this.m1 + this.m2);
        		let num3 = this.g * (this.m1 + this.m2) * Math.cos(this.a1);
        		let num4 =
        			this.a2_v * this.a2_v * this.l2 * this.m2 * Math.cos(this.a1 - this.a2);
        		let den =
        			this.l2 *
        			(2 * this.m1 + this.m2 - this.m2 * Math.cos(2 * this.a1 - 2 * this.a2));
        		return (num1 * (num2 + num3 + num4)) / den;
        	}
        }
        
        class Visualization {
        	constructor() {
        		this.canvas = document.getElementById("chaosPendulum");
        		this.ctx = this.canvas.getContext("2d");
        
        		this.trail = [];
        		this.batchSize = 10;
        		this.frameRate = 120;
        		this.trailLength = 200;
        
        		this.resize();
        		window.addEventListener("resize", this.resize.bind(this));
        
        		this.lastTime = 0;
        		requestAnimationFrame(this.draw.bind(this));
        	}
        
        	resize() {
        		this.canvas.setAttribute("width", window.innerWidth);
        		this.canvas.setAttribute("height", window.innerHeight);
        
        		this.hangPos = {
        			x: window.innerWidth / 2,
        			y: window.innerHeight / 3
        		};
        
        		this.trail = [];
        
        		let space = (window.innerHeight / 3) * 1.5;
        		if (space > 500) space = 500;
        
        		this.pendulum = new Pendulum((space / 3) * 2, space / 3, 50, 20, 0.1);
        	}
        
        	draw(time) {
        		requestAnimationFrame(this.draw.bind(this));
        
        		let x1, x2, y1, y2;
        
        		while (this.lastTime < time) {
        			th.........完整代码请登录后点击上方下载按钮下载查看