canvas动态图(canvas绘制太极图的实现示例)
类别:Web前端 浏览量:1316
时间:2021-10-13 00:17:12 canvas动态图
canvas绘制太极图的实现示例看到了很多人写的太极图案,自己也来搞一下,今天就来介绍一下
css样式代码
.animation{ width: 800px; height: 800px; border: 1px solid #000; } #canvas{ animation: rotate 6s linear infinite; } /* 给太极图设置旋转动画 */ @keyframes rotate{ 0%{ transform: none; } 100%{ transform: rotate(360deg); } }
javascript代码
//文档加载完毕后执行函数 window.onload = function(){ //获取画布对象 var canvas = document.getElementById('canvas'); //获取上下文对象 var context = canvas.getContext('2d'); //圆开始路径 context.beginPath(); //绘制最外层的大圆(黑色) context.arc(400, 400, 300, Math.PI / 180 * 0, Math.PI / 180 * 360); //将大圆填充为黑色 context.fillStyle = '#000'; context.fill(); //绘制左半圆(白色) context.beginPath(); context.arc(400, 400, 300, Math.PI / 180 * 90, Math.PI / 180 * 270); context.fillStyle = '#fff'; context.fill(); //绘制右半圆(黑色),会覆盖外层大圆,颜色一样。所以写不写都可以 /* context.beginPath(); context.arc(400, 400, 300, Math.PI / 180 * 270, Math.PI / 180 * 90); context.fillStyle = '#000'; context.fill(); */ //绘制左上半圆(黑色) context.beginPath(); context.arc(400, 250, 150, Math.PI / 180 * 90, Math.PI / 180 * 270); context.fillStyle = '#000'; context.fill(); //绘制右下半圆(白色) context.beginPath(); context.arc(400, 550, 150, Math.PI / 180 * 270, Math.PI / 180 * 90); context.fillStyle = '#fff'; context.fill(); //绘制左上小半圆(白色) context.beginPath(); context.arc(400, 250, 35, Math.PI / 180 * 0, Math.PI / 180 * 360); context.fillStyle = '#fff'; context.fill(); //绘制右下小半圆(黑色) context.beginPath(); context.arc(400, 550, 35, Math.PI / 180 * 0, Math.PI / 180 * 360); context.fillStyle = '#000'; context.fill(); }
html代码
<li class="animation"> <canvas id="canvas" width="800" height="800"></canvas> </li>
设置动画之后的太极图效果
到此这篇关于canvas绘制太极图的实现示例的文章就介绍到这了,更多相关canvas太极图内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- canvas 缩放后字发虚(canvas 绘图时位置偏离的问题解决)
- canvas如何保存当前的图片(canvas如何实现多张图片编辑的图片编辑器)
- canvas设置点击(Canvas高级路径操作之拖拽对象的实现)
- canvas里面图片如何获取(canvas生成带二维码海报的踩坑记录)
- canvas绘图白屏或者元素有缺失(高清屏中使用Canvas绘图出现模糊的问题及解决方法)
- canvas如何将一组数据生成柱子图(Canvas环形饼图与手势控制的实现代码)
- html5canvas动画(html5 canvas 实现光线沿不规则路径运动)
- canvas时钟代码(canvas实现烟花的示例代码)
- canvas跟随鼠标绘制(如何在Canvas上的图形/图像绑定事件监听的实现)
- html5canvas怎么改扇形起始角(HTML5 Canvas实现放大镜效果示例)
- html5 canvas 性能(基于html5 canvas做批改作业的小插件)
- canvas如何开启(canvas实现手机的手势解锁的步骤详细)
- html5中canvas标签(html5 canvas绘制网络字体的常用方法)
- canvas小程序海报(使用canvas生成含有微信头像的邀请海报没有微信头像问题)
- canvas 中文字体(详解canvas绘制网络字体几种方法)
- canvas图片填充位置(手摸手教你用canvas实现给图片添加平铺水印的实现)
- 这里输入关键词(怎么输入关键词搜索)
- 得这个 难治病 的人太多了,300个人赶到杭州商量怎么办(得这个难治病的人太多了)
- 经度,世界时间腕表的灵魂(世界时间腕表的灵魂)
- 阿里最新财报公布 三季度营收增长3 ,将增加150亿美元回购额度 在美股价小涨(阿里最新财报公布)
- 赵薇时胖时瘦 最近变美少女 原因在这里 躺着就变瘦(赵薇时胖时瘦最近变美)
- 学会这26种姿势,你就可以和兵哥哥切磋了(你就可以和兵哥哥切磋了)
热门推荐
- mysql left join索引怎么使用(详解mysql 使用left join添加where条件的问题分析)
- mysql效率查询(MySQL 如何分析查询性能)
- jquery滚动固定插件在哪(jquery 步骤进度轴插件的实现代码)
- python注册码实现(python实现Virginia无密钥解密)
- sql server 2019 资源不足不可信(SQL Server异常代码处理的深入讲解)
- python如何判断两个数组相同(Python实现的合并两个有序数组算法示例)
- pythonpulp怎么使用(pyhanlp安装介绍和简单应用)
- django开发平台运用的技术(django的ORM模型的实现原理)
- SQL Server与Oracle数据类型的对应关系
- sql server表字段数据类型(SQL Server数据库中伪列及伪列的含义详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9