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的@media来编写响应式的页面
Nov 01 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
html如何对span设置宽度
Oct 30 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
PHP后端银联支付及退款实例代码
2017/06/23 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
[jQuery] 事件和动画详解
2019/03/05 jQuery
创建与框架无关的JavaScript插件
2020/12/01 Javascript
python实现微信接口(itchat)详细介绍
2017/10/23 Python
python进行文件对比的方法
2018/12/24 Python
利用python开发app实战的方法
2019/07/09 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
高校学生干部的自我评价分享
2013/11/04 职场文书
大学生就业自荐书
2014/06/16 职场文书
2014年度思想工作总结
2014/11/27 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis