JSFiddle - React, Tailwind, and code Playground

HTML

<script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/uglifyjs-parser.js"></script>
<script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/jscex.js"></script>
<script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/jscex.builderBase.js"></script>
<script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/jscex.async.js"></script>
<!--[if IE]>
<script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/json2.js"></script>
<script language="javascript">
Jscex.config.codeGenerator = function (code) { return "false || " + code; }
</script>
<![endif]--><div style="border-bottom: #222 15px solid; border-left: #222 15px solid; background-color: #111; color: #ccc; border-top: #222 15px solid; border-right: #222 15px solid"><canvas id="myCanvas4" width="700" height="500">Your browser does not support the canvas element. </canvas></div>

JavaScript

var c4 = document.getElementById("myCanvas4");

var cxt4 = c4.getContext("2d");

cxt4.lineWidth = 3;

var Points4 = new Array();

var startX4 = 250;

var startY4 = 250;

var distance3 = 500;

var eyePosition4 = {
    x: 0,
    y: 0,
    z: 700
};

function init4() {

    Points4[0] = {
        x: 100,
        y: 100,
        z: 100
    };

    Points4[1] = {
        x: 100,
        y: 100,
        z: -100
    };

    Points4[2] = {
        x: -100,
        y: 100,
        z: -100
    };

    Points4[3] = {
        x: -100,
        y: 100,
        z: 100
    };

    Points4[4] = {
        x: 100,
        y: -100,
        z: 100
    };

    Points4[5] = {
        x: 100,
        y: -100,
        z: -100
    };

    Points4[6] = {
        x: -100,
        y: -100,
        z: -100
    };

    Points4[7] = {
        x: -100,
        y: -100,
        z: 100
    };

}

function changedistance4() {

    for (var i = 0; i < Points4.length; i++) {

        Points4[i].x = Points4[i].x * distance3 / Math.abs(eyePosition4.z - Points4[i].z);

        Points4[i].y = Points4[i].y * distance3 / Math.abs(eyePosition4.z - Points4[i].z);

    }

}

var currentAngle4 = 0;

var drawCube4 = function() {

    cxt4.clearRect(0, 0, 1200, 1200);

    init4();

    rotate4(degToRad(currentAngle4))

    changedistance4();

    cxt4.strokeStyle = randomColor();

    cxt4.beginPath();

    cxt4.moveTo(startX4 + Points4[0].x, startY4 - Points4[0].y);

    cxt4.lineTo(startX4 + Points4[1].x, startY4 - Points4[1].y);

    cxt4.lineTo(startX4 + Points4[2].x, startY4 - Points4[2].y);

    cxt4.lineTo(startX4 + Points4[3].x, startY4 - Points4[3].y);

    cxt4.lineTo(startX4 + Points4[0].x, startY4 - Points4[0].y);

    cxt4.moveTo(startX4 + Points4[4].x, startY4 - Points4[4].y);

    cxt4.lineTo(startX4 + Points4[5].x, startY4 - Points4[5].y);

    cxt4.lineTo(startX4 + Points4[6].x, startY4 - Points4[6].y);

    cxt4.lineTo(startX4 + Points4[7].x, startY4 - Points4[7].y);

    cxt4.lineTo(startX4 +...