HTML5 Canvas圣诞树

又逢圣诞了,为了让小站NowaMagic有点节日气氛,这里也弄一棵圣诞树放放~大家可以先看下效果。

效果演示

    <canvas id="c"></canvas>
    <script type="text/javascript">
var b = document.body;
var c = document.getElementsByTagName(‘canvas‘)[0];
var a = c.getContext(‘2d‘);
document.body.clientWidth; // fix bug in chrome.
    </script>
    <script type="text/javascript">
// 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)‘:‘%23cca‘,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 Xmas!‘,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>

由于用到canvas以及一些复杂的运算,建议使用Chrome浏览器观看,最为流畅,其次是Opera(已经开始有点卡了),Firefox差不多是逐帧播放了,Safari貌似有bug,除非用鼠标不断点击,不然几乎不会动了。用IE的话请自重。池州市贲生工艺品

Code

<!doctype html>
<html>
  <head>
    <title>JS1k, 1k demo submission [856]</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <canvas id="c"></canvas>
    <script type="text/javascript">
            var b = document.body;
            var c = document.getElementsByTagName(‘canvas‘)[0];
            var a = c.getContext(‘2d‘);
            document.body.clientWidth; // fix bug in chrome.
    </script>
    <script type="text/javascript">
// 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)‘:‘%23cca‘,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 Xmas!‘,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>

想了解更多,可以去看老外的原文 How I did the 1kb Christmas Tree

最后祝大家圣(剩)诞快乐!

时间: 2024-08-29 23:29:35

HTML5 Canvas圣诞树的相关文章

HTML5 canvas性能之画圈

主要讲了HTML5 canvas性能方面的尝试,场景是在canvas上面绘制圆圈. 我一直在尝试使用HTML5 canvas在圣诞树图片上面绘制泡泡.由于不知道哪种绘制的方法最好,最终在Stack Overflow上找到了使用radial gradients(辐射渐变)绘制圆圈的答案. 圆圈 你可能已经知道,标准地画圆圈的方法是使用arc():分享一个最好用的UI前端框架! .代码 // Drawing a circle the traditional way ctx.beginPath();

html5 canvas 详细使用教程

导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制图像(图片平铺.裁剪.像素处理[不只图像.包括其他绘制图形]) 绘制文字 保存和恢复状态(context) 保存文件 结合setInterval制作动画 结语.demo下载   前言 <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.

html5 Canvas绘制图形入门详解

html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome.Opera.Safari.IE9+)都已经开始支持html5了.除此之外,在移动浏览器市场上,众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛.html作为革命性的网页技术标准,再加上众多浏览器厂商或组织的鼎力支持,可以想见,html5将会成为未来网页技术的领头羊. ht

html5 canvas首屏自适应背景动画循环效果代码

模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大家积极评论,给出宝贵意见 下 载 演示地址 本文地址:html5 canvas首屏自适应背景动画循环效果代码

前端-HTML5 canvas学习

canvas元素算是HTML5添加的最受欢迎的功能了.它是通过在页面中设定一个区域,然后用脚本来编辑图形. 可像下面这样来引入一个canvas图像 <canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas = document.getElementById('myCanvas'); var cxt = canvas.getContext('

html5 canvas文本处理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

如何使用 HTML5 Canvas 制作水波纹效果

原文:如何使用 HTML5 Canvas 制作水波纹效果 今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javascript 就可以创建一个很有趣的解决功能. 在线演示      源码下载 Step 1. HTML 和以前一样,首先是 HTML 代码: <!DOCTYPE html> <html> <head> <meta

HTML5 画布上的 Three.js 环境灯光(HTML5 Canvas Three.js Ambient Lighting)

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. HTML5 画布上的 Three.js 环境灯光HTML5 Canvas Three.js Ambient Lighting <!DOCTY

html5 canvas 学习笔记(一)

一.canvas元素API canvas元素并未提供很多API,实际上他只提供了两个属性与三个方法: 1.canvas元素属性 width 属性:与 height 属性: canvas元素绘图表面的宽度,在默认状况下,浏览器会将canvas元素大小设定成与绘图表面大小一致,然而如果在css中覆写了元素大小,那么浏览器则会将绘图表面进行缩放,使之符合元素尺寸.其值为非负整数,默认值为300. 2.canvas元素方法 getContext()方法: 返回与该canvas元素相关的绘图环境对象,每个