H5实现3D圣诞树效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>html5写的3D逼真圣诞树效果</title>
<meta charset="utf-8" >
<style>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; }
div { margin: 0; padding: 0; border: 0; }
.nav { position: absolute; top: 0; left: 0; width: 100%; height: 27px; background-color: white; color: black; text-align: center; line-height: 25px;}a { color: black; text-decoration: none; border-bottom: 1px dashed black; }a:hover { border-bottom: 1px solid red; }.previous { float: left; margin-left: 10px; }.next { float: right; margin-right: 10px; }.green { color: green; }.red { color: red; }textarea { width: 100%; height: 100%; border: 0; padding: 0; margin: 0; padding-bottom: 20px; }.block-outer { float: left; width: 22%; height: 100%; padding: 5px; border-left: 1px solid black; margin: 30px 3px 3px 3px; }.block-inner { height: 68%; }.one { border: 0; }
</style></head><body marginwidth="0" marginheight="0"><canvas id="c" height="356" width="446">
<script>var collapsed = true;function toggle() {var fs = top.document.getElementsByTagName('frameset')[0];var f = fs.getElementsByTagName('frame');if (collapsed) {fs.rows = '250px,*';// enable resizing of frames in firefox/operafs.noResize = false;f[0].noResize = false;f[1].noResize = false;} else {fs.rows = '30px,*';// disable resizing of frames in firefox/operafs.noResize = true;f[0].noResize = true;f[1].noResize = true;}collapsed = !collapsed;}</script>
<script>var b = document.body;var c = document.getElementsByTagName('canvas')[0];var a = c.getContext('2d');document.body.clientWidth; // fix bug in chrome.
</script>
<script>
// start of submission //
M=Math;Q=M.random;J=[];U=16;T=M.sin;E=M.sqrt;for(O=k=0;x=z=j=i=k<200;)with(M[k]=k?c.cloneNode(0):c){width=height=k?32:W=446;with(getContext('2d'))if(k>10|!k)for(font='60px Impact',V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':V+(147+I)+','+(k%2?128+I:0)+','+I+',.5)':'#cca',i<7;)beginPath(fill(arc(U-i/3,24-i/2,k==13?4-(i++)/2:8-i++,0,M.PI*2,1)));else for(;x=T(i),y=Q()*2-1,D=x*x+y*y,B=E(D-x/.9-1.5*y+1),R=67*(B+1)*(L=k/9+.8)>>1,i++<W;)if(D<1)beginPath(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'),moveTo(U+x*8,U+y*8),lineTo(U+x*U,U+y*U),stroke();for(y=H=k+E(k++)*25,R=Q()*W;P=3,j<H;)J[O++]=[x+=T(R)*P+Q()*6-3,y+=Q()*U-8,z+=T(R-11)*P+Q()*6-3,j/H*20+((j+=U)>H&Q()>.8?Q(P=9)*4:0)>>1]}setInterval(function G(m,l){A=T(D-11);if(l)return(m[2]-l[2])*A+(l[0]-m[0])*T(D);a.clearRect(0,0,W,W);J.sort(G);for(i=0;L=J[i++];a.drawImage(M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1)){if(i==2e3)a.fillText('Merry Christmas!',U,345);if(!(i%7))a.drawImage(M[13],((157*(i*i)+T(D*5+i*i)*5)%W)>>0,((113*i+(D*i)/60)%(290+i/99))>>0);}D+=.02},1)
// end of submission //
</script>
</body>
</html>H5实现3D圣诞树效果相关推荐
- HTML5制作3D圣诞树效果
你好,我是悦创. 本例给大家演示一个使用 HTML5 制作的 3D 圣诞树,非常的漂亮.我们可以通过这个例子将 HTML5 Canvas 的绘图技术深入的学习一下. 效果图如下: 在线演示 https ...
- 代码实现：圣诞树效果（易懂，必会）/用html实现圣诞树效果
下面的代码只有在支持HTML5下的浏览器中运行!! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" &q ...
- html5绘制圣诞树,【Html5】JavaScript和html5实现3D圣诞树的代码
html5写的3D逼真圣诞树效果,HTML5确实是不错的一项新技术,简短的代码就能编写出如此级别的效果,确实不错.希望本代码能为学习HTML5的你带去一丝灵感.测试时请使用火狐浏览器,IE就至少使用9 ...
- Cocos Creator 3D后期效果解决方案源码剖析--从入门到融汇贯通
注:本文既有经验上的总结,又有实现方式上的讲解.既有流程上的描述,又有代码细节上的剖析. 全文字数5000+,看的时候最好带上笔和纸. 零.你的序 感谢大家的厚爱,KylinsPostEffects上 ...
- html5 3d场景设计,H5打造3d场景不完全攻略（二）: Amazing CSS3D
原标题:H5打造3d场景不完全攻略(二): Amazing CSS3D 前言 对的,本文就是着重介绍如何使用CSS3中的3D变换打造出H5中的3D效果.灵感来源于造物节团队的3d引擎,因为使用方法比较 ...
- HTML+CSS+JavaScript制作3D云效果，叼炸天！可用鼠标控制方向！
HTML+CSS+JavaScript制作3D云效果,叼炸天!可用鼠标控制方向! 作品介绍 1.网页作品简介方面 :3D云效果,叼炸天!可用鼠标控制方向! 2.网页作品编辑方面:此作品为学生个人主页网 ...
- android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...
概要: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Roate3dAnim ...
- css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
- php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...
- android左右旋转动画效果图,Android新姿势：3D翻转效果原理
首先,android里是没有3D翻转的动画效果的,但是呢,android有提供一个Camera的类,可以利用这个类来实现. 先看代码,Rotate3d是继承了Animation的一个动画类,多余的代码 ...
最新文章
- 跟面向对象卯上了，看看ES6的“类”
- linux挂载硬盘_一篇文章带你了解 linux 如何进行挂载
- CodeForces - 856B Similar Words(AC自动机+树形dp)
- Docker 安装nginx，并挂载文件
- WINDOWS 如何关闭3306端口
- mongodb php代码实例,php操作mongoDB实例分析
- jQuery基础（3）- ajax
- 数据库笔记13：创建与使用游标
- 线性基——数集压缩自动机
- excel工作表保护如何无密码撤销
- 矩阵快速幂 求解斐波那契数列的快速算法
- 【机房报修管理系统】1.简介篇 机房报修管理系统简介
- python自动下载论文_教你如何利用Python批量下载论文
- 分布式调度框架大集合
- Windows强制关机之后，自动修复失败，无法开机的问题解决
- 德勤中国持续深化与亚马逊云科技的合作，进一步扩充云技术人才储备
- 甲骨文服务器操作系统,甲骨文年内完成操作系统移换 Linux将成主要平台
- python二级考点
- 如何利用云服务器搭建个人网站
- leetcode初级———旋转数组的多种算法总结
热门文章
- 矩阵理论第一章—线性空间与子空间，空间分解与维数定理
- 星巴克推出Web3平台；天啦噜，AI绘画能007了；『决策算法』电子书；合成人脸数据集；面向数据的版本控制；前沿论文 | ShowMeAI资讯日报
- ZZNU2141: 2333
- 交叉编译linux内核实例（最详细）总结
- git 代码提交，出现403错误的问题
- Java 学生管理系统--------13
- 【论文解读】（2019-EMNLP）Tackling Long-Tailed Relations and Uncommon Entities in Knowledge Graph Completi
- closest()方法简介
- Jenkins集成GitHub
- 51单片机LCD1602液晶屏显示