p2模拟真实的物理转盘转动动画效果代码-html代码-BFW代码库

p2模拟真实的物理转盘转动动画效果代码

代码语言：html

所属分类：动画

代码描述：p2模拟真实的物理转盘转动动画效果代码

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

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

<head>

    <meta charset="UTF-8">




    <style>
        body {
            background-color: #fff;
            margin: 0;
        }

        .centered {
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        #container {
            width: 768px;
            height: 768px;
        }

        #status_label {
            position: absolute;
            top: 768px;
            width: 768px;
            color: black;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 1.5em;
            text-align: center;
            pointer-events: none;
        }

        #drawing_canvas {
            position: absolute;
        }
    </style>



</head>

<body>
    <div id="container" class="centered">
        <canvas id="drawing_canvas"></canvas>
        <div id="status_label">
            loading...
        </div>
    </div>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p2.min.js"></script>
    <script>
        const TWO_PI = Math.PI * 2;
        const HALF_PI = Math.PI * 0.5;
        // canvas settings
        var viewWidth = 768,
        viewHeight = 768,
        viewCenterX = viewWidth * 0.5,
        viewCenterY = viewHeight * 0.5,
        drawingCanvas = document.getElementById("drawing_canvas"),
        ctx,
        timeStep = (1/60),
        time = 0;

        var ppm = 24, // pixels per meter
        physicsWidth = viewWidth / ppm,
        physicsHeight = viewHeight / ppm,
        phys.........完整代码请登录后点击上方下载按钮下载查看