Hi亲们！来说说我用Canvas搞得那个太极旋转动画，真心好玩又激发了我不少编程序的灵感。这里给小伙伴们细细解说下怎么用Canvas和CSS打造这效果，还会提到几个容易碰到的坑，希望你们玩得开心
准备工作
首先，得准备工具和环境。装个浏览器和文字处理软件。推荐用VSCode，它易用又全能。再来，了解点HTML、CSS还有JavaScript的皮毛，这样学后面的就不费劲。
HTML结构
啥都别说了，先搭个简易版的HTML。只要有个画板（canvas）元素就行了，这可是做图像、动画的基石！你还能给画板起个名儿，这样就能直观地在JavaScript里找到了。
body{
background: #ddd;
}
#canvas{
position: absolute;
left: 40%;
top: 30%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-webkit-animation: testAnimate 3s linear infinite;
-o-animation: testAnimate 3s linear infinite;
animation: testAnimate 3s linear infinite;
}
@keyframes testAnimate {
from {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
CSS样式
下面，咱们用CSS调下画布的样子。首先设个宽高，再配上点基本样式，比如边框啊、背色什么的。用CSS转太极，直观明了还能调节转速和方向
JavaScript绘图
现在，咱们就直接切入重点吧～用JavaScript画出那个太极图！不过这个可得用到点儿数学知识，毕竟太极图可是由两个半圆形拼起来的，每半个圈还分为黑白色。所以咱们得算好每个半圆圆心的位置跟大小，再用Canvas的绘画功能把它们画出来。
动画效果
画完太极图后，马上就能看到它转起来！这就靠CSS里的动画属性了。设个关键帧，明确太极图各个时间段该什么样，于是乎就能做出流畅的翻滚动作。想让太极图转多久、转几圈任你定！
调试与优化
，做东西总会有点小问题，看看图形乱，或者动画卡住之类的。那咱们就要有耐心，找出到底哪里出了问题。其实，优化下代码也能让运行效果变好，比如说少干点画图的事儿，好好用下缓存什么的。
let ctx = document
.getElementById("canvas")
.getContext("2d");
// left-black-big
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.arc(250,250,200,Math.PI/2,Math.PI*1.5,false);
ctx.closePath();
ctx.fill();
// right-white-big
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.arc(250,250,200,Math.PI/2,Math.PI*1.5,true);
ctx.closePath();
ctx.fill();
// top-black-middle
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.arc(250,150,100,Math.PI/2,Math.PI*1.5,true);
ctx.closePath();
ctx.fill();
// bottom-white-middle
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.arc(250,350,100,Math.PI/2,Math.PI*1.5,false);
ctx.closePath();
ctx.fill();
// top-white-small
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.arc(250,150,25,0,Math.PI*2);
ctx.closePath();
ctx.fill();
// bottom-black-small
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.arc(250,350,25,0,Math.PI*2);
ctx.closePath();
ctx.fill();
注意事项
最后，给你们说说做这个转动太极图时该注意啥！一定要把画布弄大一点，不然图看不完整；还得在乎浏览器的兼容性，毕竟每个浏览器都有点小个性；最重要的是保持代码简洁明了，以后修修改改也容易！
说实话，用Canvas弄那个旋转太极真的挺好玩，也有点考验脑筋。这次做这个活儿，我把Canvas跟CSS都回顾了一遍，然后还锻炼出了编程序和处理问题的技巧。希望我这篇文章给你带来点灵感，欢迎大家评论里聊聊天，一起来互相学习。
那，你试过用Canvas搞动画吗?遇到啥难题没？快来评论区说说你的经历和感受，咱们一起学习进步！
评论0