用canvas画太极图（一步步详解附带源代码）

最新推荐文章于 2022-11-27 20:00:00 发布
最新推荐文章于 2022-11-27 20:00:00 发布
阅读量628 收藏
点赞数 1
分类专栏： 程序员 编程 学习 文章标签： web 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/phpyasi520/article/details/108556688
版权
这篇博客通过一步步的代码解析，展示了如何利用HTML5的canvas元素来绘制太极图。从设定画布、绘制半圆到填充颜色，最终完成太极图案的制作，适合前端开发者学习canvas绘图技巧。
摘要由CSDN通过智能技术生成

canvas绘图

该元素负责在页面中设定一个区域，然后由js动态地在这个区域中绘制图形。这个技术最早是由美国苹果公司推出的，目的是为了取代flash，很快主流浏览器都支持它。

绘制路径

要绘制路径首先必须调用beginPath()方法，如果想绘制一条连接到起点的线条则调用closePath()方法；如果路径已完成，你想用fillStyle填充它，可以调用fill()方法。另外还可以调用stroke()方法对路径描边，使用strokeStyle。

 

 

按照上图，就能画出圆，半圆，，四分之一圆等等。

开始画图

1.先给背景一个背景颜色，并设置一块画布。

<body style="background-color: steelblue;">

<canvas width="1000"height="1000"id="cv"></canvas>

</body>

2.画出一个半圆，背景颜色设为黑色。

<sc

最低0.47元/天 解锁文章
程序员冬雨
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas 画布画太极图和钟表
qq_36801966的博客
07-03 668
画图形&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;绘制图形&lt;/tit
JS用Canvas绘制太极图.
11-15
1.本项目是基于Dcloud的有一个移动APP项目 2.html5页面同时支持浏览器中访问 (绘制太极界面可以直接在浏览器中运行)
使用canvas绘制太极
qq_31800209的博客
09-08 829
太极图 今天学习canvas，哈哈哈，其实我还搞不清楚方向来者，不过太极倒是画出来了，记录一下，方便日后查询 理论：绘制圆形cxt.arc(x,y,r,起点弧度（3点位置），终止弧度，bool(默认是false:顺时针，true:逆时针)) 下图是老师画的解析图，为了方便分析，我贴过来了，其实老师和我画的方法不一样，hhh，再次感叹一下 老师的用法：cxt.arc(600,600,100,Math.PI0.5，Math.PI1.5),是右边半圆。 成图： 代码如下：` //大圆部分 cxt
canvas制作动态太极图
H&B Blog
08-06 1411
用 canvas 画布绘制出一个会旋转的太极图 方法一： 运用css动画来实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态版太极图</title> <style> *{ margin: 0; ...
利用canvas绘制太极图
weixin_44286392的博客
07-17 531
先看效果图 知识点 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画太极图
weixin_30596735的博客
07-29 160
定义和用法 arc() 方法创建弧/曲线（用于创建圆或部分圆）。 提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。 提示：请使用 stroke或 fill方法在画布上绘制实际的弧。 JavaScript 语法： context.arc(x,y,r,sAngle,eAngle,counterclockwise); 参...
用canvas画一个太极图（八卦图）
yanhappiness
03-28 4586
用canvas画一个太极图（八卦图）源码展示链接： yanhappiness.github.io/html/canvas-src.html理解什么是canvascanvas是HTML5新增的标签，用于图形的绘制。通过脚本 (通常是JavaScript)来完成.如何使用canvas也就是说canvas只是定义了一块画布，而真正实现路径,盒、圆、字符以及添加图像的绘制是借助于脚本javascript实
canvas绘制太极图
ramosTears123的博客
03-25 418
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border: 1px ...
基于canvas画一个太极图
04-29
基于canvas画一个太极图
HTML5 Canvas组件绘制太极图案
web开发
02-03 278
一实现思路： 实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆，首先绘 制两个半圆，分别为黑色和白色，组成一个圆，绘制完成以后再分别绘制一个黑色 和白色的圆在绘制好的黑白圆之内，半径恰好是黑白大圆一半。 最后在绘制好的两 个黑白小圆内分别填充白色和黑色的点，半径大小为10pixel左右。 二程序效果如下： ...
用canvas画太极
weixin_50813125的博客
09-23 202
画太极的思路 1.2.3.4. 5.6. 上代码 <script> //获取canvas对象 var canvas=document.querySelector("canvas"); //获得2d上下文对象 var count=canvas.getContext("2d"); //1.绘制最大的空心圆 ...
canvas实现太极图
qq_45378970的博客
10-05 152
效果图 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #a1{ border: 1px solid red; background-color: light
Canvas画太极图
呵呵呵
11-30 544
int width=360; private Paint paint; private RectF rectf; public TaijiTu(Context context) { super(context); init(); } public TaijiTu(Context context, @Nullable A
【Canvas】js用Canvas绘制阴阳太极图动画效果
TA远方
11-27 941
学习JavaScript是否兴趣缺缺，那就需要来一个兴趣学习，问一下有没有兴趣用Canvas画图呢，可以画很多有趣的事物，自由发挥想象，收获多多哦，这里有一个例子，如何用canvas画阴阳太极图动图效果，接下来开始讲，边学边做。
Canvas画太极图并旋转
weixin_39616739的博客
06-30 419
<canvas id="myCanvas" width="500" height="500" >your browser does not support the canvas tag </canvas> <script type="text/javascript"> var canvas = document.getElementById('myCanva...
canvas画太极图
最新发布
06-26
Canvas是HTML5中的一个标签，可以通过JavaScript来绘制图形。太极图是一种中国传统文化符号，具有深刻的哲学内涵。下面是一个简单的太极图绘制过程： 1. 首先需要在HTML中添加一个Canvas标签，并设置其宽度和高度： ``` <canvas id="myCanvas" width="200" height="200"></canvas> ``` 2. 然后，在JavaScript中获取Canvas对象，并设置画笔颜色： ``` var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.strokeStyle = "#000000"; ``` 3. 接着，绘制两个同心圆，代表太极图中的阴阳： ``` ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.stroke(); ctx.beginPath(); ctx.arc(100, 100, 20, 0, 2 * Math.PI); ctx.stroke(); ``` 4. 绘制两个半圆，代表阴阳相生： ``` ctx.beginPath(); ctx.arc(100, 75, 25, Math.PI, 2 * Math.PI); ctx.stroke(); ctx.beginPath(); ctx.arc(100, 125, 25, 0, Math.PI); ctx.stroke(); ``` 5. 最后，在两个半圆的交界处绘制两个小圆： ``` ctx.beginPath(); ctx.arc(100, 75, 5, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(100, 125, 5, 0, 2 * Math.PI); ctx.fill(); ``` 至此，太极图就绘制完成了。你可以根据自己的需要调整颜色、大小、位置等参数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值