Edit in JSFiddle

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 + Points4[4].x, startY4 - Points4[4].y);

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

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

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

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

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

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

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

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

    cxt4.stroke();

}

drawCube4()
var distanceTag = 0;
var rotate4Async = eval(Jscex.compile("async", function() {

    //当摄像机到显示屏的距离大于750，退出循环
    while (true) {
        if (distance3 < 200) distanceTag = 0;
        if (distance3 > 1000) distanceTag = 1;
        if (distanceTag == 1) distance3 -= 10;
        if (distanceTag == 0) distance3 += 10;
        currentAngle4 += 5;

        drawCube4();

        $await(Jscex.Async.sleep(100));

    }

}));

function degToRad(a) {

    return (a / (360 / (2 * Math.PI)));

}

//旋转

function rotate4(angle) {

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

        var tempX = Points4[i].x;

        var tempZ = Points4[i].z;

        Points4[i].x = Points4[i].x * Math.cos(angle) - Points4[i].z * Math.sin(angle);

        Points4[i].z = Points4[i].z * Math.cos(angle) + tempX * Math.sin(angle);

    }

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

        var tempY = Points4[i].y;

        Points4[i].y = Points4[i].z * Math.sin(angle) - Points4[i].y * Math.cos(angle);



        Points4[i].z = tempY * Math.sin(angle) + Points4[i].z * Math.cos(angle);

    }

}

function randomColor() {

    //16进制方式表示颜色0-F    
    var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
    var strHex = "#";

    var index;

    for (var i = 0; i < 6; i++) {

        //取得0-15之间的随机整数    
        index = Math.round(Math.random() * 15);

        strHex += arrHex[index];

    }

    return strHex;

}
rotate4Async().start();

<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>