128kj
- 浏览: 614296 次
- 来自: ...
-
文章分类
最新评论
-
lgh1992314：
相同的元素呢
一种离散化方法 -
HelloSummerR：
圆心的位置是随机的，于是圆的部分会落到canvas外，那样就显 ...
HTML5 Canvas学习笔记(1)处理鼠标事件 -
hlstudio：
好久没见到sokuban了，这有个java版的，带源码，可以参 ...
求推箱子的最小步数（java) -
肖泽文：
太好了，谢谢你。。有中文注释！
HTML5 推箱子游戏过关演示动画 -
swm8023：
删除操作，将最后一个叶子节点插入后也有可能上浮吧
彻底弄懂最大堆的四种操作(图解+程序)（JAVA）
效果图：
效果链接：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
效果链接：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.5 KB
1
顶
顶
2
踩
踩
分享到：
发表评论
-
HTML5 canvas 飘扬的五星红旗
2015-12-21 08:56 2562效果图： 效果链接： http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 13010效果图： 效果链接： http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7495效果图： 效果链接： http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1654效果图： 点击观看效果：http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3342网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）
2014-07-05 07:13 1431接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二（方块）
2014-07-04 13:08 1766接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）
2014-07-04 10:53 2454在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(6)拼图游戏（数字版）
2014-06-28 17:38 2625今天网上发现了一段代码，只有界面，很不错，学习了并完成了逻辑。 ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1154效果图： 点击查看效果： http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 2032效果图： 点击看效果： http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1730先要准备应付各种浏览器的声音文件，什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 2044看到哪，学到哪，记到哪。见谅，这些笔记就没有顺序和知识上的连贯 ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 3036一直在学习HTML5 Canvas相关内容，游戏，动画 ... -
javaScript 广度优先搜索法"自动推箱子"（二）
2014-06-12 09:57 1394接上文： javaScript 广度优先搜索法"自动 ... -
javaScript 广度优先搜索法"自动推箱子"（一）
2014-06-12 09:45 1906用JS写了一个“广度优先搜索法”自动推箱子，理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2289欢迎访问博主的网站：http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1531点击这里可以查看动画效果： http://www.108js. ... -
javascript for语句最佳实践
2014-05-22 08:22 660当执行冗长的for语句时，要保持语句块的尽量简洁，例如： 糟 ... -
获取鼠标在HTML5 Canvas中的坐标
2014-05-21 16:43 2473<!DOCTYPE HTML> <html& ...
相关推荐
此压缩包“HTML5+Three.js实现的金色几何多面体(透明晶体)3D旋转动画效果源码.zip”显然包含了一个使用HTML5和Three.js库创建的3D动画示例。Three.js是一个基于WebGL的JavaScript库，它简化了在浏览器中创建复杂的3D...
在这个项目“isometric-map”中，开发者利用JavaScript和HTML5的Canvas API创建了一个等轴测地图的实现。Canvas是HTML5的一个重要组成部分，它提供了一个基于矢量图形的画布，可以通过JavaScript进行动态绘图。 在...
在这个项目中，结晶体形状的动画图标很可能是通过定义3D几何体，如立方体、球体或金字塔，然后通过three.js的动画功能，改变其位置、旋转或大小，来实现动态效果。这些3D物体可能还被赋予了各种材质，例如镜面反射、...
它允许开发者用简单的方式来创建、移动和旋转三维形状，如立方体、金字塔等，进而构建出具有立体感的图形界面。在这个项目中，Isomer.js被用来搭建乐高积木的三维结构，形成小鸡的形体。 2. **HTML5 Canvas**：...
在"3D全息金字塔@ TACC"项目中，Three.js被用来构建一个交互式的Web应用程序，用户可以通过浏览器与全息金字塔进行交互，例如旋转、缩放和移动虚拟对象，从而增强用户体验和对3D内容的探索。 **HTML基础** HTML...