html5中文学习网

您的位置: 首页 > html5教程 > 滚动新闻 » 正文

html5及css3做的3D小房子

[ ] 已经帮助:人解决问题

 VHSHTML5中文学习网 - HTML5先行者学习网

这是利用html5及css3等做的3D小房子,感兴趣的可以看看。VHSHTML5中文学习网 - HTML5先行者学习网
登录会员可以看见图片及下载源代码。VHSHTML5中文学习网 - HTML5先行者学习网
源文件:VHSHTML5中文学习网 - HTML5先行者学习网
部分源代码:VHSHTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html>VHSHTML5中文学习网 - HTML5先行者学习网
<html>VHSHTML5中文学习网 - HTML5先行者学习网
<head>VHSHTML5中文学习网 - HTML5先行者学习网
<title>WireFrame</title>VHSHTML5中文学习网 - HTML5先行者学习网
<script scr="js/modernizr.js"></script>VHSHTML5中文学习网 - HTML5先行者学习网
<script type="text/javascript">VHSHTML5中文学习网 - HTML5先行者学习网
window.addEventListener("load",canvasApp,false);VHSHTML5中文学习网 - HTML5先行者学习网
function canvasApp(){VHSHTML5中文学习网 - HTML5先行者学习网
        var canvas=document.getElementById("canvas");VHSHTML5中文学习网 - HTML5先行者学习网
        var ctx=canvas.getContext("2d");VHSHTML5中文学习网 - HTML5先行者学习网
        //set upVHSHTML5中文学习网 - HTML5先行者学习网
                var R=50;VHSHTML5中文学习网 - HTML5先行者学习网
        var a=new Array(3);VHSHTML5中文学习网 - HTML5先行者学习网
        var p=new Array();VHSHTML5中文学习网 - HTML5先行者学习网
        var p2=new Array();VHSHTML5中文学习网 - HTML5先行者学习网
        var ht=new Array(9);VHSHTML5中文学习网 - HTML5先行者学习网
        var Color=new Array(9);VHSHTML5中文学习网 - HTML5先行者学习网
        var RGB=new Array();VHSHTML5中文学习网 - HTML5先行者学习网
        var vt=new Array();VHSHTML5中文学习网 - HTML5先行者学习网
        var canh=new Array();VHSHTML5中文学习网 - HTML5先行者学习网
        var center={x:500,y:400,z:0};VHSHTML5中文学习网 - HTML5先行者学习网
        var dinh=new Array();VHSHTML5中文学习网 - HTML5先行者学习网
        var tempvt={x:0,y:0,z:0};VHSHTML5中文学习网 - HTML5先行者学习网
        p.push({x:0,y:0,z:0});VHSHTML5中文学习网 - HTML5先行者学习网
        p.push({x:0,y:100,z:0});VHSHTML5中文学习网 - HTML5先行者学习网
        p.push({x:0,y:100,z:100});VHSHTML5中文学习网 - HTML5先行者学习网
        p.push({x:0,y:50,z:150});VHSHTML5中文学习网 - HTML5先行者学习网
        p.push({x:0,y:0,z:100});VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        p.push({x:150,y:0,z:0});VHSHTML5中文学习网 - HTML5先行者学习网
        p.push({x:150,y:100,z:0});VHSHTML5中文学习网 - HTML5先行者学习网
        p.push({x:150,y:100,z:100});VHSHTML5中文学习网 - HTML5先行者学习网
        p.push({x:150,y:50,z:150});VHSHTML5中文学习网 - HTML5先行者学习网
        p.push({x:150,y:0,z:100});VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        //canh cuaVHSHTML5中文学习网 - HTML5先行者学习网
VHSHTML5中文学习网 - HTML5先行者学习网
        p.push({x:50,y:0,z:0});VHSHTML5中文学习网 - HTML5先行者学习网
        p.push({x:50,y:0,z:60});VHSHTML5中文学习网 - HTML5先行者学习网
        p.push({x:75,y:0,z:60});VHSHTML5中文学习网 - HTML5先行者学习网
        p.push({x:75,y:0,z:0});VHSHTML5中文学习网 - HTML5先行者学习网
        p.push({x:100,y:0,z:60});VHSHTML5中文学习网 - HTML5先行者学习网
        p.push({x:100,y:0,z:0});VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
VHSHTML5中文学习网 - HTML5先行者学习网
        //translateVHSHTML5中文学习网 - HTML5先行者学习网
        for(var i=0;i<p.length;i++){VHSHTML5中文学习网 - HTML5先行者学习网
                p.x-=50;VHSHTML5中文学习网 - HTML5先行者学习网
                p.y-=50;VHSHTML5中文学习网 - HTML5先行者学习网
                p.z-=50;VHSHTML5中文学习网 - HTML5先行者学习网
        }VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
VHSHTML5中文学习网 - HTML5先行者学习网
        p2.push({x:0,y:0,z:0});VHSHTML5中文学习网 - HTML5先行者学习网
        p2.push({x:0,y:100,z:0});VHSHTML5中文学习网 - HTML5先行者学习网
        p2.push({x:0,y:100,z:100});VHSHTML5中文学习网 - HTML5先行者学习网
        p2.push({x:0,y:50,z:150});VHSHTML5中文学习网 - HTML5先行者学习网
        p2.push({x:0,y:0,z:100});VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        p2.push({x:100,y:0,z:0});VHSHTML5中文学习网 - HTML5先行者学习网
        p2.push({x:100,y:100,z:0});VHSHTML5中文学习网 - HTML5先行者学习网
        p2.push({x:100,y:100,z:100});VHSHTML5中文学习网 - HTML5先行者学习网
        p2.push({x:100,y:50,z:150});VHSHTML5中文学习网 - HTML5先行者学习网
        p2.push({x:100,y:0,z:100});VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        p2.push({x:0,y:30,z:0});VHSHTML5中文学习网 - HTML5先行者学习网
        p2.push({x:0,y:30,z:60});VHSHTML5中文学习网 - HTML5先行者学习网
        p2.push({x:0,y:50,z:60});VHSHTML5中文学习网 - HTML5先行者学习网
        p2.push({x:0,y:50,z:0});VHSHTML5中文学习网 - HTML5先行者学习网
VHSHTML5中文学习网 - HTML5先行者学习网
        p2.push({x:-10,y:17,z:0});VHSHTML5中文学习网 - HTML5先行者学习网
        p2.push({x:-10,y:17,z:60});VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        var tempdinh=[0,1,2,3,4];VHSHTML5中文学习网 - HTML5先行者学习网
        tempvt={x:-1,y:0,z:0};VHSHTML5中文学习网 - HTML5先行者学习网
        dinh.push(tempdinh);VHSHTML5中文学习网 - HTML5先行者学习网
        vt.push(tempvt);VHSHTML5中文学习网 - HTML5先行者学习网
        RGB.push({r:0,g:255,b:0});VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        var tempdinh=[5,6,7,8,9];VHSHTML5中文学习网 - HTML5先行者学习网
        tempvt={x:1,y:0,z:0};VHSHTML5中文学习网 - HTML5先行者学习网
        dinh.push(tempdinh);VHSHTML5中文学习网 - HTML5先行者学习网
        vt.push(tempvt);VHSHTML5中文学习网 - HTML5先行者学习网
        RGB.push({r:0,g:255,b:0});VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
VHSHTML5中文学习网 - HTML5先行者学习网
        var tempdinh=[0,1,6,5];VHSHTML5中文学习网 - HTML5先行者学习网
        tempvt={x:0,y:0,z:-1};VHSHTML5中文学习网 - HTML5先行者学习网
        dinh.push(tempdinh);VHSHTML5中文学习网 - HTML5先行者学习网
        vt.push(tempvt);VHSHTML5中文学习网 - HTML5先行者学习网
        RGB.push({r:0,g:255,b:0});VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        var tempdinh=[1,2,7,6];VHSHTML5中文学习网 - HTML5先行者学习网
        tempvt={x:0,y:1,z:0};VHSHTML5中文学习网 - HTML5先行者学习网
        dinh.push(tempdinh);VHSHTML5中文学习网 - HTML5先行者学习网
        vt.push(tempvt);VHSHTML5中文学习网 - HTML5先行者学习网
        RGB.push({r:0,g:255,b:0});VHSHTML5中文学习网 - HTML5先行者学习网
VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        var tempdinh=[2,3,8,7];VHSHTML5中文学习网 - HTML5先行者学习网
        tempvt={x:0,y:1,z:1};VHSHTML5中文学习网 - HTML5先行者学习网
        dinh.push(tempdinh);VHSHTML5中文学习网 - HTML5先行者学习网
        vt.push(tempvt);VHSHTML5中文学习网 - HTML5先行者学习网
        RGB.push({r:255,g:0,b:0});VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        var tempdinh=[3,4,9,8];VHSHTML5中文学习网 - HTML5先行者学习网
        tempvt={x:0,y:-1,z:1};VHSHTML5中文学习网 - HTML5先行者学习网
        dinh.push(tempdinh);VHSHTML5中文学习网 - HTML5先行者学习网
        vt.push(tempvt);VHSHTML5中文学习网 - HTML5先行者学习网
        RGB.push({r:255,g:0,b:0});VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        var tempdinh=[0,4,9,5];VHSHTML5中文学习网 - HTML5先行者学习网
        tempvt={x:0,y:-1,z:0};VHSHTML5中文学习网 - HTML5先行者学习网
        dinh.push(tempdinh);VHSHTML5中文学习网 - HTML5先行者学习网
        vt.push(tempvt);VHSHTML5中文学习网 - HTML5先行者学习网
        RGB.push({r:0,g:255,b:0});VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        var tempdinh=[10,11,12,13];VHSHTML5中文学习网 - HTML5先行者学习网
        tempvt={x:0,y:-1,z:0};VHSHTML5中文学习网 - HTML5先行者学习网
        dinh.push(tempdinh);VHSHTML5中文学习网 - HTML5先行者学习网
        vt.push(tempvt);VHSHTML5中文学习网 - HTML5先行者学习网
        RGB.push({r:255,g:255,b:138});VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        var tempdinh=[13,12,14,15];VHSHTML5中文学习网 - HTML5先行者学习网
        tempvt={x:-0,y:-1,z:0};VHSHTML5中文学习网 - HTML5先行者学习网
        dinh.push(tempdinh);VHSHTML5中文学习网 - HTML5先行者学习网
        vt.push(tempvt);VHSHTML5中文学习网 - HTML5先行者学习网
        RGB.push({r:255,g:255,b:138});VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        //transformVHSHTML5中文学习网 - HTML5先行者学习网
        var teta=-30*Math.PI/180;VHSHTML5中文学习网 - HTML5先行者学习网
        var phi=-165*Math.PI/180;VHSHTML5中文学习网 - HTML5先行者学习网
        var R=100;VHSHTML5中文学习网 - HTML5先行者学习网
        var E=400;VHSHTML5中文学习网 - HTML5先行者学习网
        startFunction();VHSHTML5中文学习网 - HTML5先行者学习网
        function startFunction(){VHSHTML5中文学习网 - HTML5先行者学习网
                transform();VHSHTML5中文学习网 - HTML5先行者学习网
                 drawShape();VHSHTML5中文学习网 - HTML5先行者学习网
        }VHSHTML5中文学习网 - HTML5先行者学习网
         VHSHTML5中文学习网 - HTML5先行者学习网
        function drawShape(){VHSHTML5中文学习网 - HTML5先行者学习网
                ctx.setTransform(1,0,0,1,0,0);VHSHTML5中文学习网 - HTML5先行者学习网
                ctx.strokeStyle="#808080";VHSHTML5中文学习网 - HTML5先行者学习网
                ctx.fillStyle="#C0C0C0";VHSHTML5中文学习网 - HTML5先行者学习网
                ctx.fillRect(0,0,canvas.width,canvas.height);VHSHTML5中文学习网 - HTML5先行者学习网
                Transform(center.x,center.y,center.z);VHSHTML5中文学习网 - HTML5先行者学习网
                ctx.translate(500,400);VHSHTML5中文学习网 - HTML5先行者学习网
                ctx.scale(1.5,1.5);VHSHTML5中文学习网 - HTML5先行者学习网
VHSHTML5中文学习网 - HTML5先行者学习网
                for(var i=0;i<dinh.length;i++){VHSHTML5中文学习网 - HTML5先行者学习网
                        if(ht==1){VHSHTML5中文学习网 - HTML5先行者学习网
                                ctx.beginPath();VHSHTML5中文学习网 - HTML5先行者学习网
                                ctx.fillStyle=Color;VHSHTML5中文学习网 - HTML5先行者学习网
                                ctx.moveTo(p2[dinh[0]].x,p2[dinh[0]].y);VHSHTML5中文学习网 - HTML5先行者学习网
                                //ctx.fillText(dinh[0],p2[dinh[0]].x,p2[dinh[0]].y);VHSHTML5中文学习网 - HTML5先行者学习网
                                for(var j=1;j<dinh.length;j++){VHSHTML5中文学习网 - HTML5先行者学习网
                                        ctx.lineTo(p2[dinh[j]].x,p2[dinh[j]].y);VHSHTML5中文学习网 - HTML5先行者学习网
                                        //ctx.fillText(dinh[j],p2[dinh[j]].x,p2[dinh[j]].y);VHSHTML5中文学习网 - HTML5先行者学习网
                                }VHSHTML5中文学习网 - HTML5先行者学习网
                                ctx.lineTo(p2[dinh[0]].x,p2[dinh[0]].y);VHSHTML5中文学习网 - HTML5先行者学习网
                                ctx.fill();VHSHTML5中文学习网 - HTML5先行者学习网
                                ctx.stroke();VHSHTML5中文学习网 - HTML5先行者学习网
                                ctx.closePath();VHSHTML5中文学习网 - HTML5先行者学习网
                        }VHSHTML5中文学习网 - HTML5先行者学习网
                }VHSHTML5中文学习网 - HTML5先行者学习网
                VHSHTML5中文学习网 - HTML5先行者学习网
                VHSHTML5中文学习网 - HTML5先行者学习网
         }VHSHTML5中文学习网 - HTML5先行者学习网
         VHSHTML5中文学习网 - HTML5先行者学习网
         VHSHTML5中文学习网 - HTML5先行者学习网
        function transform(){VHSHTML5中文学习网 - HTML5先行者学习网
                for(var i=0;i<p2.length;i++){VHSHTML5中文学习网 - HTML5先行者学习网
                        Transform(p.x,p.y,p.z);VHSHTML5中文学习网 - HTML5先行者学习网
                        p2.x=a[0];p2.y=a[1];p2.z=a[2];VHSHTML5中文学习网 - HTML5先行者学习网
                }VHSHTML5中文学习网 - HTML5先行者学习网
                                        //var x,y,z;VHSHTML5中文学习网 - HTML5先行者学习网
                var dodai;VHSHTML5中文学习网 - HTML5先行者学习网
                var cuongdo;VHSHTML5中文学习网 - HTML5先行者学习网
                //var eye={x:0,y:0,z:1};VHSHTML5中文学习网 - HTML5先行者学习网
                for(var i=0;i<dinh.length;i++){VHSHTML5中文学习网 - HTML5先行者学习网
                        Transform(vt.x,vt.y,vt.z);VHSHTML5中文学习网 - HTML5先行者学习网
                        if(a[2]>0) ht=1; else ht=0;VHSHTML5中文学习网 - HTML5先行者学习网
                        //colorVHSHTML5中文学习网 - HTML5先行者学习网
                        dodai=Math.sqrt(a[0]*a[0]+a[1]*a[1]+a[2]*a[2]);VHSHTML5中文学习网 - HTML5先行者学习网
                        cuongdo=-0.5+1.5*(1+a[2]/dodai)/2;VHSHTML5中文学习网 - HTML5先行者学习网
                        Color=setColor(RGB.r,RGB.g,RGB.b,cuongdo);VHSHTML5中文学习网 - HTML5先行者学习网
                }VHSHTML5中文学习网 - HTML5先行者学习网
        }VHSHTML5中文学习网 - HTML5先行者学习网
VHSHTML5中文学习网 - HTML5先行者学习网
        var x1,y1,x2,y2;var canDrag;VHSHTML5中文学习网 - HTML5先行者学习网
        //event listenerVHSHTML5中文学习网 - HTML5先行者学习网
        canvas.addEventListener("mousedown",mouseDown,false);VHSHTML5中文学习网 - HTML5先行者学习网
        canvas.addEventListener("mousemove",mouseMove,false);VHSHTML5中文学习网 - HTML5先行者学习网
        canvas.addEventListener("mouseup",mouseUp,false);VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        function mouseDown(e){VHSHTML5中文学习网 - HTML5先行者学习网
                canDrag=true;VHSHTML5中文学习网 - HTML5先行者学习网
                x1=e.clientX-canvas.offsetLeft;VHSHTML5中文学习网 - HTML5先行者学习网
                y1=e.clientY-canvas.offsetTop;VHSHTML5中文学习网 - HTML5先行者学习网
        }VHSHTML5中文学习网 - HTML5先行者学习网
VHSHTML5中文学习网 - HTML5先行者学习网
        function mouseMove(e){VHSHTML5中文学习网 - HTML5先行者学习网
        if(canDrag){VHSHTML5中文学习网 - HTML5先行者学习网
                x2=e.clientX-canvas.offsetLeft;VHSHTML5中文学习网 - HTML5先行者学习网
                y2=e.clientY-canvas.offsetTop;VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
                if(y2>y1) phi+=Math.PI/180*(y2-y1); else phi-=Math.PI/180*(y1-y2);VHSHTML5中文学习网 - HTML5先行者学习网
                if(x2>x1) teta-=Math.PI/180*(x2-x1); else teta+=Math.PI/180*(x1-x2);VHSHTML5中文学习网 - HTML5先行者学习网
                startFunction();VHSHTML5中文学习网 - HTML5先行者学习网
                x1=x2;y1=y2;VHSHTML5中文学习网 - HTML5先行者学习网
                }VHSHTML5中文学习网 - HTML5先行者学习网
        }VHSHTML5中文学习网 - HTML5先行者学习网
VHSHTML5中文学习网 - HTML5先行者学习网
        function mouseUp(){VHSHTML5中文学习网 - HTML5先行者学习网
                canDrag=false;VHSHTML5中文学习网 - HTML5先行者学习网
        }VHSHTML5中文学习网 - HTML5先行者学习网
VHSHTML5中文学习网 - HTML5先行者学习网
        function Transform(m,n,p1){VHSHTML5中文学习网 - HTML5先行者学习网
                a[0]=-m*Math.sin(teta)+n*Math.cos(teta);VHSHTML5中文学习网 - HTML5先行者学习网
                a[1]=-m*Math.cos(teta)*Math.sin(phi)-n*Math.sin(teta)*Math.sin(phi)+p1*Math.cos(phi);VHSHTML5中文学习网 - HTML5先行者学习网
                a[2]=-m*Math.cos(teta)*Math.cos(phi)-n*Math.sin(teta)*Math.cos(phi)-p1*Math.sin(phi);VHSHTML5中文学习网 - HTML5先行者学习网
        VHSHTML5中文学习网 - HTML5先行者学习网
        }VHSHTML5中文学习网 - HTML5先行者学习网
        function setColor(r,g,b,alph){VHSHTML5中文学习网 - HTML5先行者学习网
                var color=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];VHSHTML5中文学习网 - HTML5先行者学习网
                r1=color[Math.floor(r*alph/16)]+color[Math.floor(r%16*alph)];VHSHTML5中文学习网 - HTML5先行者学习网
                g1=color[Math.floor(g/16*alph)]+color[Math.floor(g%16*alph)];VHSHTML5中文学习网 - HTML5先行者学习网
                b1=color[Math.floor(b/16*alph)]+color[Math.floor(b%16*alph)];VHSHTML5中文学习网 - HTML5先行者学习网
                return "#"+r1+g1+b1;VHSHTML5中文学习网 - HTML5先行者学习网
VHSHTML5中文学习网 - HTML5先行者学习网
        }VHSHTML5中文学习网 - HTML5先行者学习网
}VHSHTML5中文学习网 - HTML5先行者学习网
</script>VHSHTML5中文学习网 - HTML5先行者学习网
</head>VHSHTML5中文学习网 - HTML5先行者学习网
<body>VHSHTML5中文学习网 - HTML5先行者学习网
<canvas id="canvas" width="1000" height="800">VHSHTML5中文学习网 - HTML5先行者学习网
        Your browser does not support HTML5 canvasVHSHTML5中文学习网 - HTML5先行者学习网
</canvas>VHSHTML5中文学习网 - HTML5先行者学习网
</body>VHSHTML5中文学习网 - HTML5先行者学习网
</html>
VHSHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
优惠活动
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助