圣诞将至:js加html5教你写出动态旋转圣诞树。

简介: 圣诞将至:js加html5教你写出动态旋转圣诞树。

js与H5 canvas实现动态旋转圣诞树

效果图:

image.jpeg

源代码

  <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,*';
          fs.noResize = false;
          f[0].noResize = false;
          f[1].noResize = false;
        }
        else {
          fs.rows = '30px,*';
          fs.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;
    </script>
    <script>
      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
              ('Happy 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)
    </script>


目录
相关文章
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
126 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
84 33
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
118 24
|
2月前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
102 2
|
3月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
231 1
|
3月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
74 3
|
3月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
57 4
|
3月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
107 0
html5+three.js公路开车小游戏源码
|
3月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
50 1
JavaScript中的原型 保姆级文章一文搞懂

热门文章

最新文章