旋转菊花

最新推荐文章于 2021-06-19 18:59:08 发布

from_shanghai

最新推荐文章于 2021-06-19 18:59:08 发布

阅读量390

点赞数

CC 4.0 BY-SA版权

分类专栏： canvas css3 小练习

本文链接：https://blog.youkuaiyun.com/from_shanghai/article/details/95333471

css3 同时被 3 个专栏收录

4 篇文章

订阅专栏

小练习

2 篇文章

订阅专栏

canvas

1 篇文章

订阅专栏

邪恶的名字~~~~~~~~~~~~~~~~~~~~~~~~~

哇咔咔~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <style type="text/css">
       #myCanvas{
           animation: move 2s linear infinite;
       }
       /*一圈转两秒钟*/
       @keyframes move{
           0%{
               transform: rotate(0deg);
           }
           100%{
               transform: rotate(360deg);
           }
       }

/*transition不能无限旋转，只1次，所以animation,animation需要用关键帧*/

   </style>
</head>
<body>
   <canvas width="50" height="50" id="myCanvas"></canvas>
   <script>
       var myCanvas = document.getElementById('myCanvas');
       // 获取画布
       var ctx = myCanvas.getContext('2d');
       // 获取画笔
       ctx.arc(25, 25, 20, 0, Math.PI);
       // 中心点坐标，半径，起点从0开始，弧度Math.PI, 顺时针
       ctx.lineWidth = 10;
       ctx.lineCap = 'round';
       ctx.stroke();
   </script>
</body>
</html>