HTML5 Canvas 旋转的“金字塔”

128kj

浏览: 600096 次
来自: ...

最近访客更多访客>>

hcmfys

caizi12

sdtvyyb_007

hanqunfeng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5 动画游戏
javascript

JavaScript html5 html

效果图：

效果链接：http://www.108js.com/article/article3/zip4/31095/demo.html
代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
    body{margin: 0;padding:0;}
    #cas{margin:100px auto;display: block;}
</style>
<title>Pyramid </title>
</head>
<body>
   <canvas id="cas" width="400" height="400">您的浏览器不支持canvas</canvas>
   <script>

var canvas = document.getElementById("cas");
var ctx = canvas.getContext("2d");
var fallLength =500 , centerX = canvas.width/2 , centerY = canvas.height/2;
Array.prototype.foreach = function(callback){
for(var i=0;i< this.length;i++){
callback.apply(this[i] , [i])
}
}
var Vector = function(x,y,z){
this.x = x;
this.y = y;
this.z = z;
this._get2d = function(){
var scale = fallLength/(fallLength+this.z);
var x = centerX + this.x*scale;
var y = centerY + this.y*scale;
return {x:x , y:y};
}
}
var Pyramid = function(length){
this.length = length;
this.faces = [];
}
Pyramid .prototype = {
_initVector:function(){
this.vectors = [];
this.vectors.push(new Vector(-this.length/2 ,0, -this.length/2 )); //0
this.vectors.push(new Vector(-this.length/2 ,0, this.length/2 )); //1
this.vectors.push(new Vector(this.length/2 , 0,-this.length/2)); //2
this.vectors.push(new Vector(this.length/2 , 0,this.length/2 )); //3
this.vectors.push(new Vector(0,-2*this.length,0)); //4
},

_draw:function(){
this.faces[0]=new Face(this.vectors[0],this.vectors[1],this.vectors[3],this.vectors[2],"#6c6");
this.faces[1]=new Face(this.vectors[0],this.vectors[1],this.vectors[4],this.vectors[4],"#6cc");
this.faces[2]=new Face(this.vectors[0],this.vectors[2],this.vectors[4],this.vectors[4],"#cc6");
this.faces[3]=new Face(this.vectors[2],this.vectors[3],this.vectors[4],this.vectors[4],"#c6c");
this.faces[4]=new Face(this.vectors[1],this.vectors[3],this.vectors[4],this.vectors[4],"#666");

this.faces.sort(function(a , b){
return b.zIndex - a.zIndex;
});
this.faces.foreach(function(){
this.draw();
   })
}
}
var Face = function(vector1,vector2,vector3,vector4,color){
this.v1 = vector1;
this.v2 = vector2;
this.v3 = vector3;
this.v4 = vector4;
this.color = color;
this.zIndex = this.v1.z + this.v2.z + this.v3.z + this.v4.z;
this.draw = function(){
ctx.save();
ctx.beginPath();
ctx.moveTo(this.v1._get2d().x , this.v1._get2d().y);
ctx.lineTo(this.v2._get2d().x , this.v2._get2d().y);
ctx.lineTo(this.v3._get2d().x , this.v3._get2d().y);
ctx.lineTo(this.v4._get2d().x , this.v4._get2d().y);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
            ctx.fillStyle = "#229";
}
}
var angleY = 0.05;
function rotateY(vectors){
var cos = Math.cos(angleY);
var sin = Math.sin(angleY);
      vectors.foreach(function(){
    var x1 = this.x * cos - this.z * sin;
    var z1 = this.z * cos + this.x * sin;
    this.x = x1;
    this.z = z1;
   })
     }
Pyramid = new Pyramid (80);
Pyramid ._initVector();
function initAnimate(){
Pyramid ._draw();
animate();
}
function animate(){
ctx.clearRect(0,0,canvas.width,canvas.height)
rotateY(Pyramid .vectors);
Pyramid ._draw();
requestAnimationFrame(animate);
}
initAnimate();

</script>
</body>
</html>

欢迎访问：http://www.108js.com

查看图片附件

1
顶

2
踩

分享到：

HTML5 canvas 飘扬的五星红旗

2015-12-24 13:25
浏览 10071
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论