- 浏览: 603914 次
- 来自: ...
文章分类
最新评论
-
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
发表评论
-
HTML5 canvas 飘扬的五星红旗
2015-12-21 08:56 2489效果图: 效果链接: http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 12969效果图: 效果链接: http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7453效果图: 效果链接: http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1632效果图: 点击观看效果:http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3289网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三(游戏面板)
2014-07-05 07:13 1413接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)
2014-07-04 13:08 1720接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一(色块)
2014-07-04 10:53 2407在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(6)拼图游戏(数字版)
2014-06-28 17:38 2581今天网上发现了一段代码,只有界面,很不错,学习了并完成了逻辑。 ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1128效果图: 点击查看效果: http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 2001效果图: 点击看效果: http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1704先要准备应付各种浏览器的声音文件,什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 1994看到哪,学到哪,记到哪。见谅,这些笔记就没有顺序和知识上的连贯 ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 2999一直在学习HTML5 Canvas相关内容,游戏,动画 ... -
javaScript 广度优先搜索法"自动推箱子"(二)
2014-06-12 09:57 1346接上文: javaScript 广度优先搜索法"自动 ... -
javaScript 广度优先搜索法"自动推箱子"(一)
2014-06-12 09:45 1871用JS写了一个“广度优先搜索法”自动推箱子,理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2262欢迎访问博主的网站:http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1486点击这里可以查看动画效果: http://www.108js. ... -
javascript for语句最佳实践
2014-05-22 08:22 621当执行冗长的for语句时,要保持语句块的尽量简洁,例如: 糟 ... -
获取鼠标在HTML5 Canvas中的坐标
2014-05-21 16:43 2447<!DOCTYPE HTML> <html& ...
相关推荐
这个特效是利用Canvas API实现的“html5 canvas炫酷旋转银河系星空背景特效”,它为网站添加了一个动态且引人入胜的视觉元素。 首先,让我们深入了解一下HTML5 Canvas的基本概念。Canvas是一个基于矢量图形的画布,...
HTML5 Canvas是Web开发中的一个强大工具,它允许...总的来说,HTML5 Canvas结合滚动事件和旋转动画,能够创建出富有创意的网页效果,提高用户的浏览体验。熟练掌握这些技术,对于提升网页设计和开发能力非常有帮助。
HTML5的canvas元素是网页开发中的一个强大工具,它提供了在浏览器端动态绘制图形的能力,包括图片处理。在这个示例中,我们将深入探讨如何利用canvas进行图片的裁剪、旋转和缩放操作。 首先,我们需要在HTML文件中...
HTML5 Canvas 旋转的3D立方体动画,有纵深感的旋转立方体,渲染的很不错,旋转的动画效果流畅,十分不错,是研究HTML5 Canvas技术的好范例。经测试,IE11兼容,火狐或Chrome、Opera等都有完美表现。
在这个特定的案例中,“HTML5 Canvas模拟3D地球旋转动画特效”利用了Canvas的强大功能来创建一个逼真的3D地球模型,并在浏览器中实现动态旋转的效果。 首先,Canvas元素是HTML5新增的特性,它是一个矩形区域,通过...
在本篇文章中,我们将深入探讨如何使用HTML5 Canvas实现文本的旋转动画。 首先,我们需要创建一个HTML文件并在其中引入Canvas元素。Canvas元素通过JavaScript来控制,所以我们需要在JavaScript中获取Canvas的2D渲染...
1、html5 2、地球旋转 3、canvas
在这个“html5 canvas绘制3D地球旋转动画特效”中,我们将深入探讨如何利用HTML5 Canvas API来创建一个逼真的3D地球模型,并实现其旋转的动画效果。 首先,我们需要理解Canvas的基本用法。Canvas是一个矩形区域,在...
"HTML5 canvas纸片3D旋转动画"是一个利用canvas实现的交互式3D效果,通常用于创建引人入胜的网页视觉体验。在本示例中,我们将会探讨如何使用HTML5的canvas API来创建3D旋转和卷曲噪音动画。 首先,要理解HTML5 ...
html5 canvas文字标签云3D旋转动画特效.rar html5 canvas文字标签云3D旋转动画特效.rar html5 canvas文字标签云3D旋转动画特效.rar html5 canvas文字标签云3D旋转动画特效.rar html5 canvas文字标签云3D旋转动画特效...
"HTML5 Canvas三维立体的旋转物体动画"这个主题涉及到的是利用Canvas API来实现三维空间中的物体旋转效果,这在游戏、数据可视化、用户界面设计等领域有广泛应用。 Canvas API提供了基础的绘图命令,如画线、填充...
"html5 canvas实现旋转的心"这个主题,显然是关于如何使用Canvas API来绘制并动态旋转一个心形图案。这篇博客文章(博文链接:https://wjlgryx.iteye.com/blog/972463)可能会详细讲解这个过程。 首先,我们需要...
html5 canvas 三维旋转的水晶球特效,除了使用CSS3技术外,还引用了一个regl.min.js特效库,类似jquery的插件库。其实这个球看上去更像是一个光棱球,能看到反射出的光线,另外背景的渲染也很到位,使整体的三维效果...
在这个“HTML5 Canvas 旋转的心形文字动画”项目中,开发者利用Canvas API来构建了一个3D风格的心形图案,这个图案由文字组成,并且能够进行360度旋转,非常适合用来制作浪漫的表白网页。 首先,我们要理解Canvas的...
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
在这个项目中,我们看到HTML5 Canvas被用来创建一个3D旋转物体的动画,同时结合CSS3的技术,实现了物体的模糊发光特效。 首先,让我们深入了解一下HTML5 Canvas的基本概念。Canvas是一个基于矢量图形的画布,通过...
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
本篇文章将深入探讨如何使用HTML5 Canvas实现一个简单的箭头旋转动画。 首先,我们需要在HTML文件中创建一个`<canvas>`元素,这是Canvas的基本画布。例如: ```html <!DOCTYPE html> <html lang="zh"> <title>...
在HTML5中,Canvas是一个非常强大的绘图工具,允许开发者在网页上绘制图形、图片以及进行复杂的动画操作。本文将详细讲解如何在Canvas上实现原位置旋转图片,并通过`translate`和`rotate`两个关键方法来理解这一过程...