JSFiddle - React, Tailwind, and code Playground

by zhanglei

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
   <script src="http://files.cnblogs.com/iamzhanglei/jscex.min.js" type="text/javascript"></script>
  
    <canvas id="myCanvas" width="1300" height="640" 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 type="text/javascript">

        var canvas = document.getElementById("myCanvas");
        var cxt = canvas.getContext("2d");
        cxt.fillStyle = "#030303";
        cxt.fillRect(0, 0, canvas.width, canvas.height);

        var img = new Image();
        img.src = "http://www.cnblogs.com/images/cnblogs_com/iamzhanglei/p1.png";
        img.onload = function () {
            cxt.drawImage(img, 600, 600);
        }

        var cyc = 10;
        var a = 20;
        var balls = [];
        var ball = {
            x: 640,
            y: 520,
            r: 28,
            vx: 0,
            vy: -1250
        };
        balls.push(ball);
        var fireAsync = eval(Jscex.compile("async", function () {
            while (ball.y > 220) {
                cxt.fillStyle = "rgba(0, 0, 0, .3)";
                cxt.fillRect(0, 0, canvas.width, canvas.height);
                cxt.fillStyle = "#fff";
                cxt.drawImage(img, 600, 540);
                cxt.globalAlpha = 1;

                for (i in balls) {
                    cxt.beginPath();
                    cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
                    cxt.closePath();
                    cxt.fill();
                    balls[i].y += balls[i].vy * cyc /...