天天看点

首页小房子图标html代码,html5及css3做的3D小房子

.z-=50;FFqHTML5中文学习网 - HTML5先行者学习网

}FFqHTML5中文学习网 - HTML5先行者学习网

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

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

p2.push({x:0,y:0,z:0});FFqHTML5中文学习网 - HTML5先行者学习网

p2.push({x:0,y:100,z:0});FFqHTML5中文学习网 - HTML5先行者学习网

p2.push({x:0,y:100,z:100});FFqHTML5中文学习网 - HTML5先行者学习网

p2.push({x:0,y:50,z:150});FFqHTML5中文学习网 - HTML5先行者学习网

p2.push({x:0,y:0,z:100});FFqHTML5中文学习网 - HTML5先行者学习网

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

p2.push({x:100,y:0,z:0});FFqHTML5中文学习网 - HTML5先行者学习网

p2.push({x:100,y:100,z:0});FFqHTML5中文学习网 - HTML5先行者学习网

p2.push({x:100,y:100,z:100});FFqHTML5中文学习网 - HTML5先行者学习网

p2.push({x:100,y:50,z:150});FFqHTML5中文学习网 - HTML5先行者学习网

p2.push({x:100,y:0,z:100});FFqHTML5中文学习网 - HTML5先行者学习网

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

p2.push({x:0,y:30,z:0});FFqHTML5中文学习网 - HTML5先行者学习网

p2.push({x:0,y:30,z:60});FFqHTML5中文学习网 - HTML5先行者学习网

p2.push({x:0,y:50,z:60});FFqHTML5中文学习网 - HTML5先行者学习网

p2.push({x:0,y:50,z:0});FFqHTML5中文学习网 - HTML5先行者学习网

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

p2.push({x:-10,y:17,z:0});FFqHTML5中文学习网 - HTML5先行者学习网

p2.push({x:-10,y:17,z:60});FFqHTML5中文学习网 - HTML5先行者学习网

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

var tempdinh=[0,1,2,3,4];FFqHTML5中文学习网 - HTML5先行者学习网

tempvt={x:-1,y:0,z:0};FFqHTML5中文学习网 - HTML5先行者学习网

dinh.push(tempdinh);FFqHTML5中文学习网 - HTML5先行者学习网

vt.push(tempvt);FFqHTML5中文学习网 - HTML5先行者学习网

RGB.push({r:0,g:255,b:0});FFqHTML5中文学习网 - HTML5先行者学习网

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

var tempdinh=[5,6,7,8,9];FFqHTML5中文学习网 - HTML5先行者学习网

tempvt={x:1,y:0,z:0};FFqHTML5中文学习网 - HTML5先行者学习网

dinh.push(tempdinh);FFqHTML5中文学习网 - HTML5先行者学习网

vt.push(tempvt);FFqHTML5中文学习网 - HTML5先行者学习网

RGB.push({r:0,g:255,b:0});FFqHTML5中文学习网 - HTML5先行者学习网

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

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

var tempdinh=[0,1,6,5];FFqHTML5中文学习网 - HTML5先行者学习网

tempvt={x:0,y:0,z:-1};FFqHTML5中文学习网 - HTML5先行者学习网

dinh.push(tempdinh);FFqHTML5中文学习网 - HTML5先行者学习网

vt.push(tempvt);FFqHTML5中文学习网 - HTML5先行者学习网

RGB.push({r:0,g:255,b:0});FFqHTML5中文学习网 - HTML5先行者学习网

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

var tempdinh=[1,2,7,6];FFqHTML5中文学习网 - HTML5先行者学习网

tempvt={x:0,y:1,z:0};FFqHTML5中文学习网 - HTML5先行者学习网

dinh.push(tempdinh);FFqHTML5中文学习网 - HTML5先行者学习网

vt.push(tempvt);FFqHTML5中文学习网 - HTML5先行者学习网

RGB.push({r:0,g:255,b:0});FFqHTML5中文学习网 - HTML5先行者学习网

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

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

var tempdinh=[2,3,8,7];FFqHTML5中文学习网 - HTML5先行者学习网

tempvt={x:0,y:1,z:1};FFqHTML5中文学习网 - HTML5先行者学习网

dinh.push(tempdinh);FFqHTML5中文学习网 - HTML5先行者学习网

vt.push(tempvt);FFqHTML5中文学习网 - HTML5先行者学习网

RGB.push({r:255,g:0,b:0});FFqHTML5中文学习网 - HTML5先行者学习网

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

var tempdinh=[3,4,9,8];FFqHTML5中文学习网 - HTML5先行者学习网

tempvt={x:0,y:-1,z:1};FFqHTML5中文学习网 - HTML5先行者学习网

dinh.push(tempdinh);FFqHTML5中文学习网 - HTML5先行者学习网

vt.push(tempvt);FFqHTML5中文学习网 - HTML5先行者学习网

RGB.push({r:255,g:0,b:0});FFqHTML5中文学习网 - HTML5先行者学习网

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

var tempdinh=[0,4,9,5];FFqHTML5中文学习网 - HTML5先行者学习网

tempvt={x:0,y:-1,z:0};FFqHTML5中文学习网 - HTML5先行者学习网

dinh.push(tempdinh);FFqHTML5中文学习网 - HTML5先行者学习网

vt.push(tempvt);FFqHTML5中文学习网 - HTML5先行者学习网

RGB.push({r:0,g:255,b:0});FFqHTML5中文学习网 - HTML5先行者学习网

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

var tempdinh=[10,11,12,13];FFqHTML5中文学习网 - HTML5先行者学习网

tempvt={x:0,y:-1,z:0};FFqHTML5中文学习网 - HTML5先行者学习网

dinh.push(tempdinh);FFqHTML5中文学习网 - HTML5先行者学习网

vt.push(tempvt);FFqHTML5中文学习网 - HTML5先行者学习网

RGB.push({r:255,g:255,b:138});FFqHTML5中文学习网 - HTML5先行者学习网

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

var tempdinh=[13,12,14,15];FFqHTML5中文学习网 - HTML5先行者学习网

tempvt={x:-0,y:-1,z:0};FFqHTML5中文学习网 - HTML5先行者学习网

dinh.push(tempdinh);FFqHTML5中文学习网 - HTML5先行者学习网

vt.push(tempvt);FFqHTML5中文学习网 - HTML5先行者学习网

RGB.push({r:255,g:255,b:138});FFqHTML5中文学习网 - HTML5先行者学习网

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

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

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

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

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

//transformFFqHTML5中文学习网 - HTML5先行者学习网

var teta=-30*Math.PI/180;FFqHTML5中文学习网 - HTML5先行者学习网

var phi=-165*Math.PI/180;FFqHTML5中文学习网 - HTML5先行者学习网

var R=100;FFqHTML5中文学习网 - HTML5先行者学习网

var E=400;FFqHTML5中文学习网 - HTML5先行者学习网

startFunction();FFqHTML5中文学习网 - HTML5先行者学习网

function startFunction(){FFqHTML5中文学习网 - HTML5先行者学习网

transform();FFqHTML5中文学习网 - HTML5先行者学习网

drawShape();FFqHTML5中文学习网 - HTML5先行者学习网

}FFqHTML5中文学习网 - HTML5先行者学习网

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

function drawShape(){FFqHTML5中文学习网 - HTML5先行者学习网

ctx.setTransform(1,0,0,1,0,0);FFqHTML5中文学习网 - HTML5先行者学习网

ctx.strokeStyle="#808080";FFqHTML5中文学习网 - HTML5先行者学习网

ctx.fillStyle="#C0C0C0";FFqHTML5中文学习网 - HTML5先行者学习网

ctx.fillRect(0,0,canvas.width,canvas.height);FFqHTML5中文学习网 - HTML5先行者学习网

Transform(center.x,center.y,center.z);FFqHTML5中文学习网 - HTML5先行者学习网

ctx.translate(500,400);FFqHTML5中文学习网 - HTML5先行者学习网

ctx.scale(1.5,1.5);FFqHTML5中文学习网 - HTML5先行者学习网

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

for(var i=0;i

if(ht==1){FFqHTML5中文学习网 - HTML5先行者学习网

ctx.beginPath();FFqHTML5中文学习网 - HTML5先行者学习网

ctx.fillStyle=Color;FFqHTML5中文学习网 - HTML5先行者学习网

ctx.moveTo(p2[dinh[0]].x,p2[dinh[0]].y);FFqHTML5中文学习网 - HTML5先行者学习网

//ctx.fillText(dinh[0],p2[dinh[0]].x,p2[dinh[0]].y);FFqHTML5中文学习网 - HTML5先行者学习网

for(var j=1;j

ctx.lineTo(p2[dinh[j]].x,p2[dinh[j]].y);FFqHTML5中文学习网 - HTML5先行者学习网

//ctx.fillText(dinh[j],p2[dinh[j]].x,p2[dinh[j]].y);FFqHTML5中文学习网 - HTML5先行者学习网

}FFqHTML5中文学习网 - HTML5先行者学习网

ctx.lineTo(p2[dinh[0]].x,p2[dinh[0]].y);FFqHTML5中文学习网 - HTML5先行者学习网

ctx.fill();FFqHTML5中文学习网 - HTML5先行者学习网

ctx.stroke();FFqHTML5中文学习网 - HTML5先行者学习网

ctx.closePath();FFqHTML5中文学习网 - HTML5先行者学习网

}FFqHTML5中文学习网 - HTML5先行者学习网

}FFqHTML5中文学习网 - HTML5先行者学习网

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

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

}FFqHTML5中文学习网 - HTML5先行者学习网

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

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

function transform(){FFqHTML5中文学习网 - HTML5先行者学习网

for(var i=0;i

Transform(p.x,p.y,p.z);FFqHTML5中文学习网 - HTML5先行者学习网

p2.x=a[0];p2.y=a[1];p2.z=a[2];FFqHTML5中文学习网 - HTML5先行者学习网

}FFqHTML5中文学习网 - HTML5先行者学习网

//var x,y,z;FFqHTML5中文学习网 - HTML5先行者学习网

var dodai;FFqHTML5中文学习网 - HTML5先行者学习网

var cuongdo;FFqHTML5中文学习网 - HTML5先行者学习网

//var eye={x:0,y:0,z:1};FFqHTML5中文学习网 - HTML5先行者学习网

for(var i=0;i

Transform(vt.x,vt.y,vt.z);FFqHTML5中文学习网 - HTML5先行者学习网

if(a[2]>0) ht=1; else ht=0;FFqHTML5中文学习网 - HTML5先行者学习网

//colorFFqHTML5中文学习网 - HTML5先行者学习网

dodai=Math.sqrt(a[0]*a[0]+a[1]*a[1]+a[2]*a[2]);FFqHTML5中文学习网 - HTML5先行者学习网

cuongdo=-0.5+1.5*(1+a[2]/dodai)/2;FFqHTML5中文学习网 - HTML5先行者学习网

Color=setColor(RGB.r,RGB.g,RGB.b,cuongdo);FFqHTML5中文学习网 - HTML5先行者学习网

}FFqHTML5中文学习网 - HTML5先行者学习网

}FFqHTML5中文学习网 - HTML5先行者学习网

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

var x1,y1,x2,y2;var canDrag;FFqHTML5中文学习网 - HTML5先行者学习网

//event listenerFFqHTML5中文学习网 - HTML5先行者学习网

canvas.addEventListener("mousedown",mouseDown,false);FFqHTML5中文学习网 - HTML5先行者学习网

canvas.addEventListener("mousemove",mouseMove,false);FFqHTML5中文学习网 - HTML5先行者学习网

canvas.addEventListener("mouseup",mouseUp,false);FFqHTML5中文学习网 - HTML5先行者学习网

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

function mouseDown(e){FFqHTML5中文学习网 - HTML5先行者学习网

canDrag=true;FFqHTML5中文学习网 - HTML5先行者学习网

x1=e.clientX-canvas.offsetLeft;FFqHTML5中文学习网 - HTML5先行者学习网

y1=e.clientY-canvas.offsetTop;FFqHTML5中文学习网 - HTML5先行者学习网

}FFqHTML5中文学习网 - HTML5先行者学习网

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

function mouseMove(e){FFqHTML5中文学习网 - HTML5先行者学习网

if(canDrag){FFqHTML5中文学习网 - HTML5先行者学习网

x2=e.clientX-canvas.offsetLeft;FFqHTML5中文学习网 - HTML5先行者学习网

y2=e.clientY-canvas.offsetTop;FFqHTML5中文学习网 - HTML5先行者学习网

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

if(y2>y1) phi+=Math.PI/180*(y2-y1); else phi-=Math.PI/180*(y1-y2);FFqHTML5中文学习网 - HTML5先行者学习网

if(x2>x1) teta-=Math.PI/180*(x2-x1); else teta+=Math.PI/180*(x1-x2);FFqHTML5中文学习网 - HTML5先行者学习网

startFunction();FFqHTML5中文学习网 - HTML5先行者学习网

x1=x2;y1=y2;FFqHTML5中文学习网 - HTML5先行者学习网

}FFqHTML5中文学习网 - HTML5先行者学习网

}FFqHTML5中文学习网 - HTML5先行者学习网

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

function mouseUp(){FFqHTML5中文学习网 - HTML5先行者学习网

canDrag=false;FFqHTML5中文学习网 - HTML5先行者学习网

}FFqHTML5中文学习网 - HTML5先行者学习网

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

function Transform(m,n,p1){FFqHTML5中文学习网 - HTML5先行者学习网

a[0]=-m*Math.sin(teta)+n*Math.cos(teta);FFqHTML5中文学习网 - HTML5先行者学习网

a[1]=-m*Math.cos(teta)*Math.sin(phi)-n*Math.sin(teta)*Math.sin(phi)+p1*Math.cos(phi);FFqHTML5中文学习网 - HTML5先行者学习网

a[2]=-m*Math.cos(teta)*Math.cos(phi)-n*Math.sin(teta)*Math.cos(phi)-p1*Math.sin(phi);FFqHTML5中文学习网 - HTML5先行者学习网

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

}FFqHTML5中文学习网 - HTML5先行者学习网

function setColor(r,g,b,alph){FFqHTML5中文学习网 - HTML5先行者学习网

var color=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];FFqHTML5中文学习网 - HTML5先行者学习网

r1=color[Math.floor(r*alph/16)]+color[Math.floor(r%16*alph)];FFqHTML5中文学习网 - HTML5先行者学习网

g1=color[Math.floor(g/16*alph)]+color[Math.floor(g%16*alph)];FFqHTML5中文学习网 - HTML5先行者学习网

b1=color[Math.floor(b/16*alph)]+color[Math.floor(b%16*alph)];FFqHTML5中文学习网 - HTML5先行者学习网

return "#"+r1+g1+b1;FFqHTML5中文学习网 - HTML5先行者学习网

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

}FFqHTML5中文学习网 - HTML5先行者学习网

}FFqHTML5中文学习网 - HTML5先行者学习网

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

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

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

Your browser does not support HTML5 canvasFFqHTML5中文学习网 - HTML5先行者学习网

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

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