canvas制作动态太极图

最新推荐文章于 2023-06-05 23:50:44 发布
最新推荐文章于 2023-06-05 23:50:44 发布
阅读量1.4k 收藏 6
点赞数
分类专栏： JS h5API html和css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42552393/article/details/98609271
版权
JS 同时被 3 个专栏收录
33 篇文章 0 订阅
订阅专栏
html和css
6 篇文章 0 订阅
订阅专栏
h5API
5 篇文章 0 订阅
订阅专栏
用 canvas 画布绘制出一个会旋转的太极图

方法一：
运用css动画来实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态版太极图</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width:600px;
			height:600px;
			background-color:#C1C1C1;
			text-align:center;
			margin:0 auto;
			margin-top: 50px;
		}
		#canvas{
			margin-top:100px;
			animation:anima 2s infinite linear;
		}
		@keyframes anima {
			0% {
				transform:rotate(0deg);
			}
			100% {
				transform:rotate(360deg);
			}
		}
	</style>
	<script>
		window.onload = function(){
			var canvas = document.getElementById('canvas');
			var context = canvas.getContext('2d');
			
			//先画一个大圆
			context.beginPath();
		　　context.arc(200,200,200,0,2*Math.PI,false);
		　　context.closePath();
			context.fillStyle = "#fff";
		　　context.lineWidth = 1;
			context.fill();

			//画左半边的半圆（从0.5*Math.PI-1.5*Math.PI）,颜色填充为黑色
			context.beginPath();
	　　	context.arc(200,200,200,0.5*Math.PI,1.5*Math.PI,false);
	　　	context.closePath();
	　　	context.fillStyle = "#000";
	　　	context.fill();

			//画左半边上面的半圆（从0.5*Math.PI-1.5*Math.PI）,颜色填充为白色
			context.beginPath();
	　　	context.arc(200,100,100,0.5*Math.PI,1.5*Math.PI,false);
	　　	context.closePath();
	　　	context.fillStyle = "#fff";
	　　	context.fill();

			//画右半边下面的半圆（从0.5*Math.PI-1.5*Math.PI）,颜色填充为黑色
			context.beginPath();
	　　	context.arc(200,300,100,0.5*Math.PI,1.5*Math.PI,true);
	　　	context.closePath();
	　　	context.fillStyle = "#000";
	　　	context.fill();

			//在上面的半圆内画一个比半圆小的整圆,颜色填充为黑色
			context.beginPath();
	　　	context.arc(200,100,30,0,2*Math.PI,false);
	　　	context.closePath();
	　　	context.fillStyle = "#000";
	　　	context.fill();

			//在下面的半圆内画一个比半圆小的整圆,颜色填充为白色
			context.beginPath();
	　　	context.arc(200,300,30,0,2*Math.PI,false);
	　　	context.closePath();
	　　	context.fillStyle = "#fff";
	　　	context.fill();
		}
	</script>
</head>
<body>
	<div>
		<canvas id="canvas" width="400px" height="400px"></canvas>
	</div>
</body>
</html>

在这里插入图片描述
方法二
运用 js 里的 setInterval() 间歇调用来动画实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态版太极图</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width:600px;
			height:600px;
			background-color:#C1C1C1;
			text-align:center;
			margin:0 auto;
			margin-top: 50px;
		}
		 #canvas{
			margin-top:100px;
		}
	</style>
	<script>
		window.onload = function(){
			var canvas = document.getElementById('canvas');
			var context = canvas.getContext('2d');
			var q =0;
			var pointX = 0;
			var pointY = 0;
			setInterval(function(){
				canvas.width =400;
				canvas.height = 400;
				context.translate(200,200);
				q += Math.PI/180;
				context.rotate(q);

				//左半边的半圆
				context.beginPath();
				context.arc(0,0,200,Math.PI*0.5,Math.PI*1.5, false);
				context.closePath();
				context.fillStyle = 'white';
				context.fill();

				//右半边的半圆
				context.beginPath();
				context.arc(0,0,200,Math.PI*0.5,Math.PI*1.5,true);
				context.closePath();
				context.fillStyle = 'black';
				context.fill();

				//左半边上面的半圆
				context.beginPath();
				context.arc(0,-100,100,0,Math.PI*2,true);
				context.closePath();
				context.fillStyle = 'black';
				context.fill();

				//右半边上面的半圆
				context.beginPath();
				context.arc(0,100,100,0,Math.PI*2,true);
				context.closePath();
				context.fillStyle = 'white';
				context.fill();

				//在上面的半圆内画一个比半圆小的整圆,颜色填充为白色
				context.beginPath();
				context.arc(0,-100,30,0,Math.PI*2,true);
				context.closePath();
				context.fillStyle = 'white';
				context.fill();
				 
				//在下面的半圆内画一个比半圆小的整圆,颜色填充为黑色 
				context.beginPath();
				context.arc(0,100,30,0,Math.PI*2,true);
				context.closePath();
				context.fillStyle = 'black';
				context.fill();
			},5);
		}
	</script>
</head>
<body>
	<div>
		<canvas id="canvas" width="400px" height="400px"></canvas>
	</div>
</body>
</html>

在这里插入图片描述

Curry 3O
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用canvas画一个太极八卦图
qq_44748497的博客
12-08 526
首先是一个静态的八卦图： 这是状态图 主要代码如下： 左半圆 ctx.beginPath() ctx.arc(250,250,200,Math.PI*1.5,Math.PI*0.5,true) ctx.fill() //右半圆 ctx.beginPath() ctx.arc(250,250,200,Math.PI*1.5,Math.PI*0.5) ctx.fillStyle = 'white' ctx.fill() //.
Javascript原生代码+H5动画--Canvas画布案例之太极图
最新发布
xinxinran2288的博客
07-10 367
Javascript原生代码+H5-canvas画布绘制图形
用canvas画太极图（一步步详解附带源代码）
jgxy2019的博客
08-04 955
canvas绘图 该元素负责在页面中设定一个区域，然后由js动态地在这个区域中绘制图形。这个技术最早是由美国苹果公司推出的，目的是为了取代flash，很快主流浏览器都支持它。 绘制路径 要绘制路径首先必须调用beginPath()方法，如果想绘制一条连接到起点的线条则调用closePath()方法；如果路径已完成，你想用fillStyle填充它，可以调用fill()方法。另外还可以调用stroke()方法对路径描边，使用strokeStyle。 按照上图，就能画出圆，半圆，，四分之一圆等等。
太极图形html5代码,canvas绘制太极图的实现示例
weixin_30615567的博客
06-04 1065
看到了很多人写的太极图案，自己也来搞一下，今天就来介绍一下css样式代码.animation{width: 800px;height: 800px;border: 1px solid #000;}#canvas{animation: rotate 6s linear infinite;}/* 给太极图设置旋转动画 */@keyframes rotate{0%{transform: none;}10...
HTML5 Canvas组件绘制太极图案
web开发
02-03 271
一实现思路： 实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆，首先绘 制两个半圆，分别为黑色和白色，组成一个圆，绘制完成以后再分别绘制一个黑色 和白色的圆在绘制好的黑白圆之内，半径恰好是黑白大圆一半。 最后在绘制好的两 个黑白小圆内分别填充白色和黑色的点，半径大小为10pixel左右。 二程序效果如下： ...
使用h5新增的canvas标签绘制太极图案-代码
JackieDYH的博客
07-29 697
定义和用法 arc() 方法创建弧/曲线（用于创建圆或部分圆）。 提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。 提示：请使用 stroke或 fill方法在画布上绘制实际的弧。 JavaScript 语法 context.arc(x,y,r,sAngle,eAngle,counterclockwise); 参数 描述 x 圆的中心的 x 坐标。 y 圆的中心的 y 坐标。 r 圆的半径。 sAngl
canvas绘制动态心电图
05-08
这篇内容主要探讨如何使用Canvas来绘制动态心电图，这在医疗健康应用、生理数据监测等领域非常有用，它可以让用户在浏览器上实时查看心电图数据，效果如同监护仪一样。 首先，了解Canvas的基本操作是必要的。Canvas...
Canvas制作旋转的太极的示例
09-27
通过CSS实现元素的定位和旋转动画，利用Canvas的绘图方法绘制复杂的形状，最终形成具有视觉吸引力的旋转太极图。这对于学习HTML5的Canvas特性和理解动态Web图形的实现方式具有很高的参考价值。此外，了解并掌握这些...
canvas绘制太极图
01-08
css样式代码 .../* 给太极图设置旋转动画 */ @keyframes rotate{ 0%{ transform: none; } 100%{ transform: rotate(360deg); } } javascript代码 //文档加载完毕后执行函数 [removed] = function(){
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元素，它的主要...
使用Android原生canvas绘制炫酷的太极八卦图
qq_46149597的博客
06-05 395
使用Android原生canvas绘制炫酷的太极八卦图。
【Canvas】js用Canvas绘制阴阳太极图动画效果
TA远方
11-27 932
学习JavaScript是否兴趣缺缺，那就需要来一个兴趣学习，问一下有没有兴趣用Canvas画图呢，可以画很多有趣的事物，自由发挥想象，收获多多哦，这里有一个例子，如何用canvas画阴阳太极图动图效果，接下来开始讲，边学边做。
使用Canvas实现动态太极图
Mrxcguo的博客
08-27 416
效果图： <!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;
canvas之太极图
HeartzzZZ的博客
10-24 126
<!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绘制太极图
weixin_44286392的博客
07-17 524
先看效果图 知识点 1.html的<canvas>标签: 该标签通过脚本（通常是JavaScript）来绘制图形，它只是图形容器，必须使用脚本绘制图形。 关于HTML画布的一些方法：https://www.runoob.com/tags/ref-canvas.html 2.HTML DOM getContext()方法： 在该案例中，var cxt=c.getContext("2d");参数"2d"指定了在画布上绘制的类型，即二维绘图。（当前唯一合法值是"2d"） 返回值cxt是一个Canva.
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、付费专栏及课程。

余额充值