如何使用Canvas画太极图案,代码是什么
Admin 2022-07-11 群英技术资讯 485 次浏览
看到了很多人写的太极图案,自己也来搞一下,今天就来介绍一下
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代码
<div class="animation"> <canvas id="canvas" width="800" height="800"></canvas> </div>
设置动画之后的太极图效果
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
本文将介绍几种实现带圆角的三角形的实现方式。法一. 全兼容的 SVG 大法想要生成一个带圆角的三角形,代码量最少、最好的方式是使用 SVG 生成。使用 SVG 的 多边形标签 <poly
在web项目中我们经常要使用时间轴(timeline)控件。本文提供一种基于CSS3的可逐项展开的timeline,在各展开项中可以嵌入文本、图片、视频等元素。运行效果如下: 实现 该控件的实现过程较为简单,主要由test.html文件和timeline.css...
最近看了很多关于css3的知识和文章,觉得css3用起来很方便,使用css3的话,在页面布局上可以省去很多不必要的代码。下面小编给大家带来了纯css3实现宠物小鸡的相关知识,感兴趣的朋友一起看看吧
这篇文章主要介绍了css 实现矩形四个边角加粗的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本篇文章给大家介绍一下如何使用纯CSS实现鼠标点击拖拽效果,让交互更加生动,希望对大家有所帮助!
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008