一个酷炫的HTML页面的代码，一个基于HTML5 Canvas实现的预加载动画效果

YCY^v^

已于 2023-11-29 11:26:00 修改

阅读量796

点赞数 25

分类专栏：笔记前端文章标签： html 前端

于 2023-11-29 11:23:42 首次发布

本文链接：https://blog.csdn.net/chenyu_Yang/article/details/134685706

版权

笔记同时被 2 个专栏收录

61 篇文章 1 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

```

<!DOCTYPE html>
<html>
<head>
   <title>Cool HTML5 Canvas Preloader</title>
   <style type="text/css">
       body {
           background-color: #222;
           color: #fff;
           font-family: Arial, sans-serif;
           font-size: 16px;
           line-height: 1.5;
           margin: 0;
           padding: 0;
           text-align: center;
       }
       canvas {
           display: block;
           margin: 0 auto;
           padding: 0;
       }
   </style>
</head>
<body>
   <canvas id="canvas"></canvas>
   <script type="text/javascript">
       var canvas = document.getElementById('canvas');
       var ctx = canvas.getContext('2d');
       var cw = canvas.width = 200;
       var ch = canvas.height = 200;
       var cx = cw / 2,
           cy = ch / 2;
       var rad = Math.PI / 180;
       var frames = 0;

       function drawCircle() {
           ctx.beginPath();
           ctx.strokeStyle = '#fff';
           ctx.lineWidth = 10;
           ctx.arc(cx, cy, 60, -90 * rad, (frames * 6 - 90) * rad);
           ctx.stroke();
       }

       function render() {
           frames++;
           ctx.clearRect(0, 0, cw, ch);
           drawCircle();
           requestAnimationFrame(render);
       }

render();
</script>
</body>
</html>

```