昨天在逛知乎是发现了一个外国程序媛的作品,一个旋转的八卦图,挺好玩的,就不要脸的拿过来分享一下。 符知乎地址:https://zhuanlan.zhihu.com/p/275358
css实例——“旋转”太极八卦图 话不多说,直接上代码: HTML代码部分: 1 <!DOCTYPE html> 2 3 4 5 太极八卦图案例 6 7 8 9
前言: 昨天在逛知乎是发现了一个外国程序媛的作品,一个旋转的八卦图,挺好玩的,就不要脸的拿过来分享一下。符知乎地址:https://zhuanlan.zhihu.com/p/
实现八卦图的做法很多,可以运用到伪类元素就一个div就可以呈现出来,也可以用定位元素的方法,这里就简单用定位的方法实现画出一个八卦图,然后用js控制旋转,让其运动
旋转的八卦图 const canvas = document.querySelector("canvas"); const pen = canvas.getContext("2d"); const pi = Math.PI; pen.translate(200