Canvas画布+animation绘制太极图及实现旋转

最新推荐文章于 2024-09-09 23:30:35 发布

張張張_

最新推荐文章于 2024-09-09 23:30:35 发布

阅读量756

点赞数 3

本文链接：https://blog.youkuaiyun.com/zyj123__/article/details/105801901

版权

这篇博客利用Canvas画布结合animation动画技术，详细介绍了如何创建并实现太极图的旋转效果。文中提供了相关的HTML、CSS和JS代码示例，最终会展示一个动态旋转的太极图效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css代码

#canvas{
      /* transform: rotate(360deg); */
       /* 动画名字 动画执行时间 匀速执行 执行无限次 */
      animation: rotate 10s linear infinite; 
    }
    /* 太极图动画声明 */
    @keyframes rotate {
       0%{
         transform: none;
       }
       100%{
         /* 旋转360度 */
         transform: rotate(360deg);
       }       
      }

JS代码
（注：1.文档加载完毕后执行 2.script标签引入js代码）

//文档加载完毕后执行
    window.onload = function(){
    //获取canvas节点
    var canvas = document.getElementById('canvas');
    //获取2D上下文对象
    var context = canvas.getContext('2d');
     //最外层大圆
     //开始路径
     context.beginPath();
     //设置圆形路径
     context.arc(400, 400, 200, Math.PI / 180 * 0, Math.PI / 180 * 360);
     //关闭路径
     context.closePath();
     //设定绘制样式
     context.fillStyle='#000';
     //进行图形绘制
     context.fill();
    //右半圆 黑色
    context.beginPath();
    context.arc(400, 400, 200, Math.PI / 180 * 90, Math.PI / 180 * 270,true);
    context.closePath();
    context.fillStyle = '#000';
    context.fill(); 
     //左半圆 白色
     context.beginPath();
    context.arc(400, 400, 200, Math.PI / 180 * 90, Math.PI / 180 * 270);
    context.closePath();
    context.fillStyle = '#fff';
    context.fill(); 
    //上部分小圆
    context.beginPath();
    context.arc(400, 300, 100, Math.PI / 180 * 0, Math.PI / 180 * 360);
    context.closePath();
    context.fillStyle = '#fff';
    context.fill(); 
    //下部分小圆
    context.beginPath();
    context.arc(400, 500, 100, Math.PI / 180 * 0, Math.PI / 180 * 360);
    context.closePath();
    context.fillStyle = '#000';
    context.fill(); 
    //底下的小小白圆
    context.beginPath();
     context.arc(400, 500, 35, Math.PI / 180 * 0, Math.PI / 180 * 360);
     context.closePath();
     context.fillStyle='#fff'
     context.fill();
     //上面的小小黑圆  
     context.beginPath();
     context.arc(400, 300, 35, Math.PI / 180 * 0, Math.PI / 180 * 360);
     context.closePath();
     context.fillStyle='#000';
     context.fill();
    }

html代码

<canvas id="canvas" width="800" height="800" style="border: none;"></canvas>

canvas+animation太极图效果
后续上传效果视频~