devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

用HTML5实现灯笼效果_canvas 画灯笼

作者：Gausst松鼠会 | 2024-02-15 15:16:15

赞

踩

canvas 画灯笼

本文介绍了两种实现效果：一种使用画布（canvas）标签/元素，另一种不用画布（canvas）标签/元素主要使用CSS实现。

使用画布（canvas）标签/元素实现，下面，在画布上，用JavaScript画两个红灯笼，并且红灯笼左右来回移动的源码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>红灯笼</title>
  5.   <style>
  6.     canvas {
  7.       border: 1px solid black;
  8.       background-color: blue; /*设置画布的背景色为蓝色*/
  9.     }
  10.   </style>
  11. </head>
  12. <body>
  13. <!-- 设置画布宽高是500*300，单位是 px。 -->
  14.   <canvas id="canvas" width="500" height="300"></canvas>
  15.  
  16.   <script>
  17.     var canvas = document.getElementById('canvas');
  18.     var context = canvas.getContext('2d');
  19.  
  20.     var angle1 = 0;
  21.     var angle2 = 0;  // 使第二个灯笼的初始角度与第一个灯笼不同
  22.  
  23.     function drawLantern(x, y, radius, angle) {
  24.       x += Math.sin(angle) * 20;
  25.  
  26.       // Draw the suspension line
  27.       context.beginPath();
  28.       context.moveTo(x, y - radius / 4);
  29.       context.lineTo(x, 0);
  30.       context.stroke();
  31.  
  32.       // Draw the top 
  33.       context.beginPath();
  34.       context.arc(x, y, radius / 4, 0, Math.PI * 2);
  35.       context.fillStyle = 'gold';
  36.       context.fill();
  37.       context.stroke();
  38.  
  39.       // Draw the main body
  40.       context.beginPath();
  41.       context.arc(x, y, radius, 0, Math.PI * 2);
  42.       context.fillStyle = 'red';
  43.       context.fill();
  44.       context.stroke();
  45.  
  46.       // Draw the bottom
  47.       context.beginPath();
  48.       context.arc(x, y + radius / 2, radius / 4, 0, Math.PI * 2);
  49.       context.fillStyle = 'gold';
  50.       context.fill();
  51.       context.stroke();
  52.  
  53.       // Draw the tassel
  54.       context.beginPath();
  55.       context.moveTo(x, y + radius / 2);
  56.       context.lineTo(x, y + radius * 1.2);
  57.       context.moveTo(x - radius / 6, y + radius / 2);
  58.       context.lineTo(x - radius / 6, y + radius * 1.2);
  59.       context.moveTo(x + radius / 6, y + radius / 2);
  60.       context.lineTo(x + radius / 6, y + radius * 1.2);
  61.       context.stroke();
  62.     }
  63.  
  64.     function animate() {
  65.       context.clearRect(0, 0, canvas.width, canvas.height);
  66.  
  67.       context.fillStyle = 'blue';
  68.       context.fillRect(0, 0, canvas.width, canvas.height);
  69.  
  70.       drawLantern(200, 200, 50, angle1);
  71.       drawLantern(300, 200, 50, angle2);
  72.  
  73.       angle1 += 0.05;
  74.       angle2 += 0.05;
  75.  
  76.       requestAnimationFrame(animate);
  77.     }
  78.  
  79.     animate();
  80.   </script>
  81. </body>
  82. </html>

运行效果如下：

下面是另一种实现主要使用CSS实现，源码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>红灯笼效果</title>
  6.  
  7. <!-- 灯笼代码↓，放在 head标签内-->
  8. <div class="deng-box2">
  9.     <div class="deng">
  10.         <div class="xian">
  11.         </div>
  12.         <div class="deng-a">
  13.             <div class="deng-b">
  14.                 <div class="deng-t">年</div>
  15.             </div>
  16.         </div>
  17.         <div class="shui shui-a">
  18.             <div class="shui-c">
  19.             </div>
  20.             <div class="shui-b"></div>
  21.         </div>
  22.     </div>
  23. </div>
  24. <div class="deng-box3">
  25.     <div class="deng">
  26.         <div class="xian">
  27.         </div>
  28.         <div class="deng-a">
  29.             <div class="deng-b">
  30.                 <div class="deng-t">新</div>
  31.             </div>
  32.         </div>
  33.         <div class="shui shui-a">
  34.             <div class="shui-c"></div>
  35.             <div class="shui-b">
  36.             </div>
  37.         </div>
  38.     </div>
  39. </div>
  40. <div class="deng-box1">
  41.     <div class="deng">
  42.         <div class="xian">
  43.         </div>
  44.         <div class="deng-a">
  45.             <div class="deng-b">
  46.                 <div class="deng-t">乐</div>
  47.             </div>
  48.         </div>
  49.         <div class="shui shui-a">
  50.             <div class="shui-c"></div>
  51.             <div class="shui-b"></div>
  52.         </div>
  53.     </div>
  54. </div>
  55. <div class="deng-box">
  56.     <div class="deng">
  57.         <div class="xian">
  58.         </div>
  59.         <div class="deng-a">
  60.             <div class="deng-b">
  61.                 <div class="deng-t">快</div>
  62.             </div>
  63.         </div>
  64.         <div class="shui shui-a">
  65.             <div class="shui-c">
  66.             </div>
  67.             <div class="shui-b"></div>
  68.         </div>
  69.     </div>
  70. </div>
  71. <style type="text/css">
  72.     .deng-box {
  73.         position: fixed;
  74.         top: -40px;
  75.         right: 150px;
  76.         z-index: 9999;
  77.         pointer-events: none;
  78.     }
  79.     .deng-box1 {
  80.         position: fixed;
  81.         top: -30px;
  82.         right: 10px;
  83.         z-index: 9999;
  84.         pointer-events: none
  85.     }
  86.     .deng-box2 {
  87.         position: fixed;
  88.         top: -40px;
  89.         left: 150px;
  90.         z-index: 9999;
  91.         pointer-events: none
  92.     }
  93.     .deng-box3 {
  94.         position: fixed;
  95.         top: -30px;
  96.         left: 10px;
  97.         z-index: 9999;
  98.         pointer-events: none
  99.     }
  100.     .deng-box1 .deng,
  101.     .deng-box3 .deng {
  102.         position: relative;
  103.         width: 120px;
  104.         height: 90px;
  105.         margin: 50px;
  106.         background: #d8000f;
  107.         background: rgba(216, 0, 15, .8);
  108.         border-radius: 50% 50%;
  109.         -webkit-transform-origin: 50% -100px;
  110.         -webkit-animation: swing 5s infinite ease-in-out;
  111.         box-shadow: -5px 5px 30px 4px #fc903d
  112.     }
  113.     .deng {
  114.         position: relative;
  115.         width: 120px;
  116.         height: 90px;
  117.         margin: 50px;
  118.         background: #d8000f;
  119.         background: rgba(216, 0, 15, .8);
  120.         border-radius: 50% 50%;
  121.         -webkit-transform-origin: 50% -100px;
  122.         -webkit-animation: swing 3s infinite ease-in-out;
  123.         box-shadow: -5px 5px 50px 4px #fa6c00
  124.     }
  125.     .deng-a {
  126.         width: 100px;
  127.         height: 90px;
  128.         background: #d8000f;
  129.         background: rgba(216, 0, 15, .1);
  130.         margin: 12px 8px 8px 8px;
  131.         border-radius: 50% 50%;
  132.         border: 2px solid #dc8f03
  133.     }
  134.     .deng-b {
  135.         width: 45px;
  136.         height: 90px;
  137.         background: #d8000f;
  138.         background: rgba(216, 0, 15, .1);
  139.         margin: -4px 8px 8px 26px;
  140.         border-radius: 50% 50%;
  141.         border: 2px solid #dc8f03
  142.     }
  143.     .xian {
  144.         position: absolute;
  145.         top: -20px;
  146.         left: 60px;
  147.         width: 2px;
  148.         height: 20px;
  149.         background: #dc8f03
  150.     }
  151.     .shui-a {
  152.         position: relative;
  153.         width: 5px;
  154.         height: 20px;
  155.         margin: -5px 0 0 59px;
  156.         -webkit-animation: swing 4s infinite ease-in-out;
  157.         -webkit-transform-origin: 50% -45px;
  158.         background: orange;
  159.         border-radius: 0 0 5px 5px
  160.     }
  161.     .shui-b {
  162.         position: absolute;
  163.         top: 14px;
  164.         left: -2px;
  165.         width: 10px;
  166.         height: 10px;
  167.         background: #dc8f03;
  168.         border-radius: 50%
  169.     }
  170.     .shui-c {
  171.         position: absolute;
  172.         top: 18px;
  173.         left: -2px;
  174.         width: 10px;
  175.         height: 35px;
  176.         background: orange;
  177.         border-radius: 0 0 0 5px
  178.     }
  179.     .deng:before {
  180.         position: absolute;
  181.         top: -7px;
  182.         left: 29px;
  183.         height: 12px;
  184.         width: 60px;
  185.         content: " ";
  186.         display: block;
  187.         z-index: 999;
  188.         border-radius: 5px 5px 0 0;
  189.         border: solid 1px #dc8f03;
  190.         background: orange;
  191.         background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)
  192.     }
  193.     .deng:after {
  194.         position: absolute;
  195.         bottom: -7px;
  196.         left: 10px;
  197.         height: 12px;
  198.         width: 60px;
  199.         content: " ";
  200.         display: block;
  201.         margin-left: 20px;
  202.         border-radius: 0 0 5px 5px;
  203.         border: solid 1px #dc8f03;
  204.         background: orange;
  205.         background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)
  206.     }
  207.     .deng-t {
  208.         font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif;
  209.         font-size: 3.2rem;
  210.         color: #dc8f03;
  211.         font-weight: 700;
  212.         line-height: 85px;
  213.         text-align: center
  214.     }
  215.     .night .deng-box,
  216.     .night .deng-box1,
  217.     .night .deng-t {
  218.         background: 0 0 !important
  219.     }
  220.     @-moz-keyframes swing {
  221.         0% {
  222.             -moz-transform: rotate(-10deg)
  223.         }
  224.         50% {
  225.             -moz-transform: rotate(10deg)
  226.         }
  227.         100% {
  228.             -moz-transform: rotate(-10deg)
  229.         }
  230.     }
  231.     @-webkit-keyframes swing {
  232.         0% {
  233.             -webkit-transform: rotate(-10deg)
  234.         }
  235.         50% {
  236.             -webkit-transform: rotate(10deg)
  237.         }
  238.         100% {
  239.             -webkit-transform: rotate(-10deg)
  240.         }
  241.     }
  242. </style>
  243. <!-- 灯笼代码↑-->
  244.  
  245. </head>
  246. <body>
  247.  
  248.  
  249. </body>
  250. </html>

运行效果如下：

附录

为HTML网页添加喜庆气氛的诸多方法https://blog.csdn.net/cnds123/article/details/128865230

用CSS画了个灯笼https://juejin.cn/post/7051370971932033038

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/85292
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号