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;
                        thi.........完整代码请登录后点击上方下载按钮下载查看