Html 帆布旋转立方体

我在这个代码笔上有一个HTML5画布旋转立方体：

有人能帮忙演示如何去除黑色背景吗？它看起来像ctx.fillStyle=“#000000”；属性（尝试在代码笔中更改或删除），但我希望有一个透明的背景，而且似乎找不到实现这一点的方法

 window.onload = startDemo;

    function Point3D(x,y,z) {
        this.x = x;
        this.y = y;
        this.z = z;

        this.rotateX = function(angle) {
            var rad, cosa, sina, y, z
            rad = angle * Math.PI / 180
            cosa = Math.cos(rad)
            sina = Math.sin(rad)
            y = this.y * cosa - this.z * sina
            z = this.y * sina + this.z * cosa
            return new Point3D(this.x, y, z)
        }

        this.rotateY = function(angle) {
            var rad, cosa, sina, x, z
            rad = angle * Math.PI / 180
            cosa = Math.cos(rad)
            sina = Math.sin(rad)
            z = this.z * cosa - this.x * sina
            x = this.z * sina + this.x * cosa
            return new Point3D(x,this.y, z)
        }

        this.rotateZ = function(angle) {
            var rad, cosa, sina, x, y
            rad = angle * Math.PI / 180
            cosa = Math.cos(rad)
            sina = Math.sin(rad)
            x = this.x * cosa - this.y * sina
            y = this.x * sina + this.y * cosa
            return new Point3D(x, y, this.z)
        }

        this.project = function(viewWidth, viewHeight, fov, viewDistance) {
            var factor, x, y
            factor = fov / (viewDistance + this.z)
            x = this.x * factor + viewWidth / 2
            y = this.y * factor + viewHeight / 2
            return new Point3D(x, y, this.z)
        }
    }

    var vertices = [
        new Point3D(-1,1,-1),
        new Point3D(1,1,-1),
        new Point3D(1,-1,-1),
        new Point3D(-1,-1,-1),
        new Point3D(-1,1,1),
        new Point3D(1,1,1),
        new Point3D(1,-1,1),
        new Point3D(-1,-1,1)
    ];

    // Define the vertices that compose each of the 6 faces. These numbers are
    // indices to the vertex list defined above.
    var faces = [[0,1,2,3],[1,5,6,2],[5,4,7,6],[4,0,3,7],[0,4,5,1],[3,2,6,7]]

    var angle = 0;

    function startDemo() {
        canvas = document.getElementById("cubeSpin");
        if( canvas && canvas.getContext ) {
            ctx = canvas.getContext("2d");
            setInterval(loop,33);
        }
    }

    function loop() {
        var t = new Array();

        ctx.fillStyle="#000000";
        ctx.fillRect(0,0,320,200);

        for( var i = 0; i < vertices.length; i++ ) {
            var v = vertices[i];
            var r = v.rotateX(angle).rotateY(angle).rotateZ(angle);
            var p = r.project(320,200,128,3.5);
            t.push(p)
        }

        ctx.strokeStyle = "rgb(255,255,255)"

        for( var i = 0; i < faces.length; i++ ) {
            var f = faces[i]
            ctx.beginPath()
            ctx.moveTo(t[f[0]].x,t[f[0]].y)
            ctx.lineTo(t[f[1]].x,t[f[1]].y)
            ctx.lineTo(t[f[2]].x,t[f[2]].y)
            ctx.lineTo(t[f[3]].x,t[f[3]].y)
            ctx.closePath()
            ctx.stroke()
        }
        angle += 2

window.onload=startDemo；
功能点3D（x、y、z）{
这个.x=x；
这个。y=y；
这个。z=z；
this.rotateX=函数（角度）{
var rad、cosa、新浪、y、z
rad=角度*Math.PI/180
cosa=Math.cos（rad）
sina=Math.sin（rad）
y=this.y*cosa-this.z*sina
z=这个.y*sina+这个.z*cosa
返回新的Point3D（此.x，y，z）
}
this.rotateY=函数（角度）{
var rad、cosa、新浪、x、z
rad=角度*Math.PI/180
cosa=Math.cos（rad）
sina=Math.sin（rad）
z=这个.z*cosa-这个.x*sina
x=这个.z*sina+这个.x*cosa
返回新的点3D（x，this.y，z）
}
this.rotateZ=函数（角度）{
var rad、cosa、新浪、x、y
rad=角度*Math.PI/180
cosa=Math.cos（rad）
sina=Math.sin（rad）
x=这个.x*cosa-这个.y*sina
y=这个.x*sina+这个.y*cosa
返回新的Point3D（x，y，this.z）
}
this.project=函数（viewWidth、viewHeight、fov、viewDistance）{
var因子，x，y
系数=视野/（视距+此.z）
x=此.x*系数+视图宽度/2
y=此.y*系数+视图高度/2
返回新的Point3D（x，y，this.z）
}
}
变量顶点=[
新的Point3D（-1,1，-1），
新的Point3D（1,1，-1），
新的Point3D（1，-1，-1），
新的Point3D（-1，-1，-1），
新的Point3D（-1,1,1），
新的Point3D（1,1,1），
新的Point3D（1，-1,1），
新的Point3D（-1，-1,1）
];
//定义构成6个面中每个面的顶点。这些数字是
//指向上面定义的顶点列表的索引。
变量面=[[0,1,2,3]，[1,5,6,2]，[5,4,7,6]，[4,0,3,7]，[0,4,5,1]，[3,2,6,7]]
var角=0；
函数startDemo（）{
canvas=document.getElementById（“cubeSpin”）；
if（canvas&&canvas.getContext）{
ctx=canvas.getContext（“2d”）；
设置间隔（循环，33）；
}
}
函数循环（）{
var t=新数组（）；
ctx.fillStyle=“#000000”；
ctx.fillRect（0,0320200）；
对于（var i=0；i

---

}更改：

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,320,200);

ctx.clearRect(0,0,320,200);

至：

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,320,200);

ctx.clearRect(0,0,320,200);

---

哇！真管用！！我以为我试过了，但一定是做错了。谢谢