Canvas制作旋转的太极的示例


Posted in HTML / CSS onMarch 09, 2018

前言

好久没动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

<body>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>

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制作旋转的太极的示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
详解px单位html5响应式方案
Mar 08 #HTML / CSS
html5开发三八女王节表白神器
Mar 07 #HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 #HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 #HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 #HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 #HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 #HTML / CSS
You might like
谨慎使用PHP的引用原因分析
2012/09/06 PHP
基于php使用memcache存储session的详解
2013/06/25 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
简明json介绍
2008/09/28 Javascript
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
记录Python脚本的运行日志的方法
2019/06/05 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
python障碍式期权定价公式
2019/07/19 Python
python matplotlib拟合直线的实现
2019/11/19 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
表彰先进集体通报
2014/01/12 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
2014年工商所工作总结
2014/12/09 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
实用求职信模板范文
2019/05/13 职场文书
nginx rewrite功能使用场景分析
2022/05/30 Servers
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers