128kj
- 浏览: 583788 次
- 来自: ...
-
文章分类
最新评论
-
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 2367效果图： 效果链接： http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 12895效果图： 效果链接： http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7385效果图： 效果链接： http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1579效果图： 点击观看效果：http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3200网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）
2014-07-05 07:13 1371接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二（方块）
2014-07-04 13:08 1661接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）
2014-07-04 10:53 2334在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(6)拼图游戏（数字版）
2014-06-28 17:38 2489今天网上发现了一段代码，只有界面，很不错，学习了并完成了逻辑。 ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1076效果图： 点击查看效果： http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 1931效果图： 点击看效果： http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1660先要准备应付各种浏览器的声音文件，什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 1902看到哪，学到哪，记到哪。见谅，这些笔记就没有顺序和知识上的连贯 ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 2918一直在学习HTML5 Canvas相关内容，游戏，动画 ... -
javaScript 广度优先搜索法"自动推箱子"（二）
2014-06-12 09:57 1292接上文： javaScript 广度优先搜索法"自动 ... -
javaScript 广度优先搜索法"自动推箱子"（一）
2014-06-12 09:45 1780用JS写了一个“广度优先搜索法”自动推箱子，理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2216欢迎访问博主的网站：http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1399点击这里可以查看动画效果： http://www.108js. ... -
javascript for语句最佳实践
2014-05-22 08:22 543当执行冗长的for语句时，要保持语句块的尽量简洁，例如： 糟 ... -
获取鼠标在HTML5 Canvas中的坐标
2014-05-21 16:43 2410<!DOCTYPE HTML> <html& ...
相关推荐
HTML5 Canvas 旋转的3D立方体动画，有纵深感的旋转立方体，渲染的很不错，旋转的动画效果流畅，十分不错，是研究HTML5 Canvas技术的好范例。经测试，IE11兼容，火狐或Chrome、Opera等都有完美表现。
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码
1、html5 2、地球旋转 3、canvas
html5 canvas绘制3D地球旋转动画特效
HTML5 Canvas 旋转的心形文字动画，呈现出3D的风格，围成心形的图案，并360度旋转，可制作一些表白网页使用。
HTML5 canvas纸片3D旋转动画代码，3D旋转代码，卷曲噪音动画。
《HTML 5 Canvas基础教程》从HTML5和JavaScript（以及jQuery）的基础知识讲起，全面介绍了HTML5Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态，以及变形、合成、处理图像和视频等，让...
html5 canvas页面滚动背景图片旋转动画特效
html5 canvas 三维旋转的水晶球特效，除了使用CSS3技术外，还引用了一个regl.min.js特效库，类似jquery的插件库。其实这个球看上去更像是一个光棱球，能看到反射出的光线，另外背景的渲染也很到位，使整体的三维效果...
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
html5 canvas 播放视频html5 canvas 播放视频
对应我canvas旋转小球这篇博客
canvas图片旋转，每次顺时针或逆时针旋转90度后，宽度自适应容器宽度，等比缩放
资源名称：HTML5 Canvas基础教程内容简介：《HTML5 Canvas基础教程》从HTML5和Javaｓｃｒｉｐｔ(以及jQuery)的基础知识讲起，全面介绍了HTML5 Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复...
这是一款html5 canvas制作的3D手表旋转展示动画特效，获取的是本地时间，可以鼠标拖动控制旋转。
NULL 博文链接：https://128kj.iteye.com/blog/2061646
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
html5 canvas炫酷的万花筒旋转动画特效
HTML5 canvas商品图片360度旋转浏览效果，全视角查看效果。
这是一款html5 canvas炫酷旋转银河系星空背景特效。该特效通过canvas来绘制银河系星盘，并制作星系旋转的效果，非常炫酷。