JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

<canvas id="myCanvas" width="600" height="400" style="border:15px solid gray;
-moz-border-radius-bottomleft:40px;
-moz-border-radius-bottomright:40px;
-webkit-border-bottom-left-radius:40px;
-webkit-border-bottom-right-radius:40px;
-webkit-border-top-left-radius:40px;
-webkit-border-top-right-radius:40px;">
Your browser does not support the canvas element.
</canvas>
   <script src="http://files.cnblogs.com/iamzhanglei/jscex.min.js" type="text/javascript"></script>
<script type="text/javascript">
//长方体的杠杆，4个直线方程组成
    var lever = {};
    var canvas = document.getElementById("myCanvas");
    var cxt = canvas.getContext("2d");
  

    var line = {
        x: 300,
        y: 170,
        length: 160,
        angle: 0
    };
    cxt.fillStyle = "#030303";
    cxt.fillRect(0, 0, canvas.width, canvas.height);
    var roundAsync = eval(Jscex.compile("async", function () {
        while (true) {
            
            cxt.fillRect(0, 0, canvas.width, canvas.height);
            try {
                line.angle += (Math.PI * 2) / 300;
                var x = line.x + line.length * Math.cos(line.angle);
                var y = line.y + line.length * Math.sin(line.angle);
                // Draw line
            
                cxt.strokeStyle = "#fff";
                cxt.lineWidth = 6;
                cxt.beginPath();
                cxt.moveTo(line.x, line.y);
                cxt.lineTo(x, y);
                cxt.stroke();
                cxt.fillStyle = "#fff";
                cxt.beginPath();
                cxt.arc(line.x, line.y, 6, 0, Math.PI * 2, true);
                cxt.closePath();
                cxt.fill();

                $await(Jscex.Async.sleep(10));
            }
            catch (e) { 
            alert(e)
            }
        }
    }))
roundAsync().start();


    </script>
</body>
</html>