js实现canvas文字挂在绳子上的弹性交互效果代码-html代码-BFW代码库

js实现canvas文字挂在绳子上的弹性交互效果代码

代码语言：html

所属分类：拖放

代码描述：js实现canvas文字挂在绳子上的弹性交互效果代码

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">


<style>
body, html {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	touch-action: none;
	content-zooming: none;
	background: #000;
}

canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	user-select: none;
	background: #000;
}
</style>

</head>
<body>

<div></div>

<script>
"use strict";
{
	const txt = 'EXPANDED';
	const viscosity = 0.005;
	const stiffness = 0.99;
	class Point {
		constructor (i, x, y) {
			this.c = null;
			this.x0 = x;
			this.y0 = y;
			this.x = x + Math.sin(i) * 100;
			this.y = y + Math.cos(i) * 100;
			this.vx = 0.0;
			this.vy = 0.0;
			this.a = 0.0;
			this.s = 0.0;
			this.p0 = this;
			this.p1 = this;
			this.t = 0;
		}
		texture (c, color) {
			this.c = document.createElement("canvas");
			const ctx = this.c.getContext("2d");
			this.c.width = this.c.height = 400;
			ctx.font = "500px Arial Black, Arial";
			ctx.fillStyle = color;
			ctx.textAlign = "center";
			ctx.fillText(c, 200, 385);
		}
		drawSegment() {
			ctx.beginPath();
			ctx.strokeStyle = "#666";
			ctx.moveTo(this.p0.x, this.p0.y);
			ctx.lineTo(this.x, this.y);
			ctx.lineTo(this.p1.x, this.p1.y);
			ctx.stroke();
			ctx.beginPath();
			ctx.arc(this.x, this.y, 3, 0, 2 * Math.PI);
			ctx.stroke();
		}
		draw () {
			const fx = (this.x0 - this.x) * viscosity;
			const fy = (this.y0 - this.y) * viscosity;
			this.vx *= stiffness;
			this.vy *= stiffness;
			this.vx += fx;
			this.vy += fy;
			this.x += this.vx;
			this.y += this.vy;
			if (this.c !== null) {
				ctx.beginPath();
				ctx.save();
				ctx.translate(this.x, this.y);
				const dy = this.p1.x - this.p0.x;
				const dx = this.p1.y - this.p0.y;
				this.a = Math.atan2(dx, dy);
				this.s = Math.sqrt(dy * dy + dx * dx) / 2;
				ctx.rotate(this.a);
				ctx.drawImage(this.c, -this.s * 0.5, -this.s * 0.5, this.s, this.s);
				ctx.restore();
			}
		}
	}
	const points = [];
	const canvas = {
		init() {
			this.elem = document.createElement("canvas");
			document.body.appendChild(this.elem);
			this.resize();
			window.addEventListener("resize", () => this.resize(), false);
			return this.elem.getContext("2d");
		},
		resize() {
			this.width = this.elem.width = this.elem.offsetWidth;
			this.height = this.elem..........完整代码请登录后点击上方下载按钮下载查看