使用Canvas实现动态太极图

最新推荐文章于 2023-02-16 09:19:57 发布
最新推荐文章于 2023-02-16 09:19:57 发布
阅读量410 收藏
点赞数 1
分类专栏： 练习 文章标签： css3 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mrxcguo/article/details/108264778
版权

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>太极图</title>
	<style type="text/css">
		canvas{
			/*border: 1px solid #ffffff;*/
			animation-name: move;
			animation-duration: 1s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}
 
		@keyframes move{
			0%{
				transform: rotate(0deg);
			}
			100%{
				transform: rotate(360deg);
			}
		}
 
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.getElementById('canvas')
			var context = canvas.getContext('2d')
			// 大圆
			context.beginPath()
			// Math.PI   Math.PI*3/2   270度
			context.arc(200,200,200,Math.PI/2,Math.PI*3/2)
			context.closePath()
			context.fillStyle = 'black'
			context.fill()
 
			context.beginPath()
			// Math.PI   Math.PI*3/2   270度
			context.arc(200,200,200,Math.PI*3/2,Math.PI/2)
			context.closePath()
			context.fillStyle = '#ffffff'
			context.fill()
 
			// 中圆
			context.beginPath()
			// Math.PI   Math.PI*3/2   270度
			context.arc(200,100,100,0,Math.PI*2)
			context.closePath()
			context.fillStyle = 'black'
			context.fill()
 
			context.beginPath()
			// Math.PI   Math.PI*3/2   270度
			context.arc(200,300,100,0,Math.PI*2)
			context.closePath()
			context.fillStyle = '#ffffff'
			context.fill()
 
			// 小圆
			context.beginPath()
			// Math.PI   Math.PI*3/2   270度
			context.arc(200,300,20,0,Math.PI*2)
			context.closePath()
			context.fillStyle = 'black'
			context.fill()
 
			context.beginPath()
			// Math.PI   Math.PI*3/2   270度
			context.arc(200,100,20,0,Math.PI*2)
			context.closePath()
			context.fillStyle = '#ffffff'
			context.fill()
			
 
		}
	</script>
</head>
<body>
	<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>
菜鸟guo
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS Canvas动画之太极图
撒网要见鱼的专栏
11-15 2622
在逛论坛时,偶然看到一篇博文里提到用js绘制一个动态太极图,觉得挺有意思的,于是就开始动手自己也做了一个.  原文链接: http://www.cnblogs.com/varlxj/p/taiji.html (请尊重原作者) 原文里面只能绘制一个图形,并且旋转的时候旋转的是canvas,于是我就做了点改变,使其同时支持多个图形绘制和旋转,同时用一个工厂类来进行控制,防止内存泄漏。 预览效果:
3D旋转的太极图
weixin_44808327的博客
12-12 1315
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 260px; height: 260px; margin: 200px auto; position: relative; border:
canvas制作动态太极图
H&B Blog
08-06 1395
用 canvas 画布绘制出一个会旋转的太极图 方法一： 运用css动画来实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态版太极图</title> <style> *{ margin: 0; ...
使用canvas绘制太极
qq_31800209的博客
09-08 808
太极图 今天学习canvas，哈哈哈，其实我还搞不清楚方向来者，不过太极倒是画出来了，记录一下，方便日后查询 理论：绘制圆形cxt.arc(x,y,r,起点弧度（3点位置），终止弧度，bool(默认是false:顺时针，true:逆时针)) 下图是老师画的解析图，为了方便分析，我贴过来了，其实老师和我画的方法不一样，hhh，再次感叹一下 老师的用法：cxt.arc(600,600,100,Math.PI0.5，Math.PI1.5),是右边半圆。 成图： 代码如下：` //大圆部分 cxt
【Canvas】js用Canvas绘制阴阳太极图动画效果
TA远方
11-27 912
学习JavaScript是否兴趣缺缺，那就需要来一个兴趣学习，问一下有没有兴趣用Canvas画图呢，可以画很多有趣的事物，自由发挥想象，收获多多哦，这里有一个例子，如何用canvas画阴阳太极图动图效果，接下来开始讲，边学边做。
canvas绘制太极图的实现示例
01-21
看到了很多人写的太极图案，自己也来搞一下，今天就来.../* 给太极图设置旋转动画 */ @keyframes rotate{ 0%{ transform: none; } 100%{ transform: rotate(360deg); } } javascript代码 //文档加载完毕后执行
JS用Canvas绘制太极图.
11-15
本项目“JS用Canvas绘制太极图”利用了HTML5的Canvas API，结合DCloud移动开发平台，实现了在移动APP和浏览器环境中展示动态的太极图案。 首先，让我们了解一下Canvas的基本概念。Canvas是一个HTML5元素，它的主要...
Canvas制作旋转的太极的示例
09-27
首先，从描述和标签我们可以知道，这个示例的核心在于使用Canvas和CSS来实现太极图案的旋转。在CSS部分，主要设置了Canvas元素的样式和动画。通过`-webkit-transform`、`-moz-transform`等前缀和`transform: ...
自定义view实现太极图、时钟
03-26
本项目中的"自定义view实现太极图、时钟"是一个很好的示例，它利用了Canvas对象来绘制复杂的图形，同时结合系统时间进行动态更新。接下来，我们将详细探讨这两个自定义View的实现原理和关键知识点。 首先，我们来看...
taijitu.rar_太极图
09-14
此外，为了使太极图动态化，开发者可能还引入了动画机制，例如使用定时器（Timer）来改变图形的颜色或位置，从而创造出旋转或流动的效果。这将涉及到事件监听和处理，以及对图形状态的更新。 在代码组织上，JAVA...
OpenGL实现的太极图
06-02
这就是个用OpenGL实现的太极图没有什么的了就是画几个圆
canvas状态绘图
vagabond_的博客
02-16 174
canvas 绘制多条线一样、canvas状态绘图
canvas动态绘制图片的方法
前端御书房
10-05 2810
canvas动态绘制图片的放法，持续更新中……
canvas之太极图
HeartzzZZ的博客
10-24 125
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style...
canvas绘制太极图
puriXue的博客
04-27 1613
css样式代码 .animation{ width: 800px; height: 800px; border: 1px solid #000; } #canvas{ animation: rotate 6s linear infinite; } /* 给太极图设置旋转动画 */ @keyframes rotate{ 0%{ transform: none; }...
太极图canvas动态版
h13803761292的博客
08-29 868
      &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;太极图&lt;/title&gt; &lt;style type="text/css"&gt; #oneDiv{ display: block;
一个<i>标签实现动态太极图
喜欢文学的程序员
02-16 2948
最近看到一个小demo，一个&lt;i&gt;标签实现动态太极图，按照如下两张图片的样式，来回交替运动，感觉很是惊喜，我们工作内容都是政府类网站，平时很少能把这些css3属性结合起来使用。                                            body部分：         &lt;body&gt;             &lt;i class="boxs"...
使用matlab画可以旋转的太极图
一名在读学生
11-24 2200
对于太极图，我在网上也找了一些方法来画。最后我选择了这个。 主要思路就是，先画两个大的半圆，拼成太极最外圈的圆，然后画两个小圆（小圆的位置可以自己多调几次，自己看的舒服就好），接着再画两个半圆，作为太极图中间的分割线。这样，太极的轮廓就画好了。 接下来就是填充颜色。涂色的画，建议根据面积，从大到小开始，利用图层覆盖来填充颜色。 那么就可以先给其中的一个大半圆填充成黑色（反正底色就是白色，白色就不用填充啦），然后填充“分割线”那里的两个半圆（虽然画的时候展现的是圆弧，其实是个半圆啦）， 接下来，画一条白线，遮
html实现太极图效果
JackieDYH的博客
03-14 4104
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阴阳</title> <style> .yinyang { width: 200px; height: 99px; border:1px s...
canvas实现动态波形图
最新发布
05-22
要实现动态波形图，可以使用HTML5的Canvas元素来绘制。以下是一个简单的示例代码，可以通过其了解Canvas绘图的基本概念和用法。 ```html <canvas id="canvas" width="400" height="300"></canvas> ``` ```javascript var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var x = 0; var y = canvas.height / 2; var amplitude = 50; var frequency = 0.1; function draw() { requestAnimationFrame(draw); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); while (x < canvas.width) { var dy = amplitude * Math.sin(x * frequency); ctx.lineTo(x, y + dy); x++; } ctx.stroke(); x = 0; } draw(); ``` 在这个例子中，我们创建了一个Canvas元素，并获取到了其2D上下文对象。我们定义了一些变量，包括当前x和y坐标、波形的振幅和频率。我们使用 `Math.sin()` 函数来计算每个点的偏移量，并使用 `ctx.lineTo()` 方法在Canvas上绘制波形线条。我们使用 `requestAnimationFrame()` 函数来让动画运行更加流畅。 你可以调整振幅和频率的值，来改变波形的形状。你也可以添加更多的绘制逻辑，来实现更加复杂的动态图形效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值