Canvas如何制作旋转太极的动画
这篇文章将为大家详细讲解有关Canvas如何制作旋转太极的动画,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
在黔西等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都做网站、成都网站设计 网站设计制作按需规划网站,公司网站建设,企业网站建设,成都品牌网站建设,全网营销推广,成都外贸网站建设公司,黔西网站建设费用合理。
前言
好久没动canvas了,今下午突然想回顾一下,就写了个旋转的太极,哈哈,蛮好玩的,在这里就将自己写的过程展示出来,旋转使用的css实现的,没有用canvas自己的,希望大佬们不要吐槽。
css
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); } }
html
js
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如何制作旋转太极的动画
URL标题:http://scyanting.com/article/jcpeep.html