JSFiddle - React, Tailwind, and code Playground

by artwl

HTML

<canvas id="myCanvas">
    您的浏览器不支持canvas!
</canvas>

CSS

canvas{
    background-color:#000;
}

JavaScript

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
                    return window.setTimeout(callback, 1000 / 60); 
                };
  window.requestAnimationFrame = requestAnimationFrame;
})();

var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
    return;
}
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var ctx = canvas.getContext("2d");

var fwx = -1,
    fwy = -1,
    currFW = null,
    currBallIndex = -1,
    drawCount = 0 ,
    allDrawCount = 40,
    width = canvas.width,
    height = canvas.height;

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function getRandom(minNum, maxNum) {
    var iChoices = maxNum - minNum + 1;　　
    return Math.floor(Math.random() * iChoices + minNum);
}

function drawLine(span) {
    if (currFW && currBallIndex !== -1) {
        if (drawCount <= allDrawCount) {
            ctx.save();
            drawCount++;
            for (var i = 0, j = currFW.balls.length; i < j; i++) {
                var currBall = currFW.balls[i],
                    beginPoint = currBall.currPosition(),
                    endPoint = currBall.nextPosition();
                if (beginPoint && endPoint) {
                    console.log(currBallIndex, drawCount, currBall, beginPoint, endPoint);
                    ctx.beginPath();
                    ctx.moveTo(currBall.bx, currBall.by);
                    ctx.lineTo(beginPoint.x, beginPoint.y);
                    ctx.strokeStyle = "#000";
                    ctx.stroke();
                    ctx.beginPath();
                    ctx.moveTo(beginPoint.x, beginPoint.y);
                    ctx.lineTo(endPoint.x, endPoint.y);
        ...