欢迎访问 生活随笔！
tag聚合

凯发ag旗舰厅登录网址下载

当前位置： 凯发ag旗舰厅登录网址下载 > 前端技术 > html >内容正文

html

html css实现旋转太极图动态效果 -凯发ag旗舰厅登录网址下载

发布时间：2024/10/14 html 31 豆豆
凯发ag旗舰厅登录网址下载 收集整理的这篇文章主要介绍了 html css实现旋转太极图动态效果 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

如果对代码有疑惑，可以看我的个人视频
https://www.bilibili.com/video/bv1vv411r75p/
效果

静止太极图

动态太极图
动态太极图代码

body {background: silver;height: 2000px;}#canvas {position: absolute;top: 20%;left: 50%;margin-left: -250px;animation: rotate1 .1s linear infinite; }@keyframes rotate1 {100% {transform: rotate(360deg);}} <div><canvas id="canvas" width="500" height="500">canvas>div> let ctx = document.getelementbyid("canvas").getcontext("2d");// 创建context对象// 左大半圆ctx.beginpath();// 起始路径ctx.fillstyle = "red";// 填充颜色ctx.arc(250, 250, 200, math.pi / 2, math.pi * 1.5, false);// 创建弧/曲线//arc(x,y,r,起始角，结束角，顺时针) ctx.closepath();// 从当前点返回起始路径ctx.fill();// 填充绘图// 右大半圆ctx.beginpath();ctx.fillstyle = "#000";ctx.arc(250, 250, 200, math.pi / 2, math.pi * 1.5, true);ctx.closepath();ctx.fill();// 右小半圆ctx.beginpath();ctx.fillstyle = "red";ctx.arc(250, 150, 100, math.pi / 2, math.pi * 1.5, true);ctx.closepath();ctx.fill();// 左小半圆ctx.beginpath();ctx.fillstyle = "#000";ctx.arc(250, 350, 100, math.pi / 2, math.pi * 1.5, false);ctx.closepath();ctx.fill();// 上小圆ctx.beginpath();ctx.fillstyle = "#000";ctx.arc(250, 150, 25, 0, math.pi * 2);ctx.closepath();ctx.fill();// 下小圆ctx.beginpath();ctx.fillstyle = "red";ctx.arc(250, 350, 25, 0, math.pi * 2);ctx.closepath();ctx.fill();

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的html css实现旋转太极图动态效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。

网站地图