Html5 绘制旋转的太极图
采用Html5+JavaScript在Canvas中绘制旋转的太极图,如下图所示:
具体思路和绘制逻辑,在上图中已有说明,代码如下:
1 <script type="text/javascript"> 2 3 //只画边框线,无填充 4 function bigCircle(ctx,x, y, r, st, end, w,oc) { 5 ctx.lineWidth = w; 6 ctx.beginPath(); 7 ctx.arc(x, y, r, st, end, oc); 8 ctx.closePath(); 9 ctx.stroke(); 10 } 11 //有填充,画小圆,x,y表示大圆的圆心,r表示大圆的半径,w表示线宽,oc表示方向,l表示上下,d表示度数 12 function smallCircle(ctx, x, y, r, st, end, w, oc, l,d) { 13 var Angle = d * Math.PI / 180; //偏移角用弧度表示 14 ctx.lineWidth = w; 15 ctx.beginPath(); 16 if (l) { 17 ctx.fillStyle = "black"; 18 ctx.arc(x + (r / 2) * Math.sin(Angle), y - (r / 2) * Math.cos(Angle), r/10, st, end, oc); 19 } else { 20 ctx.fillStyle = "red"; 21 ctx.arc(x - (r / 2) * Math.sin(Angle), y + (r / 2) * Math.cos(Angle), r/10, st, end, oc); 22 } 23 ctx.closePath(); 24 ctx.stroke(); 25 ctx.fill(); 26 } 27 28 //此函数是画带S形曲线的圆,l表示左右,true表示左,顺时针,false表示右,逆时针 29 //d表示度数 30 function halfCircle(ctx, x, y, r, w, l,d) { 31 ctx.lineWidth = w; 32 if (l) { 33 ctx.fillStyle = "black"; 34 } else { 35 ctx.fillStyle = "red"; 36 } 37 ctx.beginPath(); 38 var Angle = d * Math.PI / 180;//偏移角用弧度表示 39 40 ctx.arc(x + (r / 2) * Math.sin(Angle), y - (r / 2) * Math.cos(Angle), r / 2, Math.PI / 2 + Angle, Math.PI * 3 / 2 + Angle, true); 41 ctx.arc(x - (r / 2) * Math.sin(Angle), y + (r / 2) * Math.cos(Angle), r / 2, Math.PI*3 / 2 + Angle, Math.PI / 2 + Angle, true); 42 ctx.arc(x, y, r, Math.PI / 2 + Angle, Math.PI * 3 / 2 + Angle, l); //顺时针,逆时针通过参数判断 43 ctx.closePath(); 44 ctx.stroke(); 45 ctx.fill(); 46 } 47 48 var num = 0;//表示旋转的度数 49 function drawTaichi() { 50 var c = document.getElementById("myCanvas"); 51 var ctx = c.getContext("2d"); 52 var cX = 200; 53 var cY = 200; 54 var radius = 150; 55 ctx.clearRect(0,0,c.width,c.height); 56 //绘制s线 左 57 halfCircle(ctx, cX, cY, radius, 1, true, num); 58 //右 59 halfCircle(ctx, cX, cY, radius, 1, false, num); 60 //绘制小圆,上 61 smallCircle(ctx, cX, cY, radius, 0, Math.PI * 2, 1, true, true, num); 62 //绘制小圆,下 63 smallCircle(ctx, cX, cY, radius, 0, Math.PI * 2, 1, true, false, num); 64 //绘制外圆 65 bigCircle(ctx, cX, cY, radius, 0, Math.PI * 2, 2, true); 66 ctx.save(); 67 num++; 68 num = num % 360;//只有360°,所以大于360,就重新开始 69 } 70 71 window.onload = function () { 72 setInterval(drawTaichi, 200); 73 } 74 75 </script>
View Code
转载于:https://www.cnblogs.com/hsiang/p/6103908.html
Html5 绘制旋转的太极图相关推荐
- HTML 5:绘制旋转的太极图
2019独角兽企业重金招聘Python工程师标准>>> HTML: <!DOCTYPE><html><head><meta charset= ...
- java如何画百分比圆环_canvas绘制旋转的圆环百分比进度条
作者:依然 | 时间:2015-05-29 | 阅读:122 canvas绘制旋转的圆环百分比进度条 从上一篇的文章使用HTML5 Canvas arc()绘制圆形/圆环 我们了解到了怎么使用ca ...
- 根据卫星仰角和方位角使用html5绘制天空图(投影图)
本文记录根据卫星仰角和方位角使用html5绘制天空图(投影图). 也就是根据这两个角度绘制坐标点在圆形上的投影. 术语: 方位角:从标准方向的北端起,顺时针方向到直线的水平角称为该直线的方位角.方位角 ...
- HTML5 3D旋转图片相册
H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CSS3 新属性的了解及掌握. 完整代码如下: <!DOCT ...
- html5时钟代码菜鸟课程,html5绘制时钟动画
这篇文章主要介绍了html5绘制时钟动画,需要的朋友可以参考下 复制代码代码如下: var clock=document.getElementById("clock"); var ...
- html5 绘制图形,HTML5绘制几何图形
绘制几何图形 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext(" ...
- html5自动旋转图片,HTML5画布旋转图片
你可以使用canvas'context.translate& context.rotate来旋转你的图像 这里有一个函数来绘制旋转了指定度数的图像: function drawRotated( ...
- 安卓学习笔记38:利用OpenGL ES绘制旋转立方体
文章目录 零.学习目标 一.绘制图形基本步骤 二.绘制旋转立方体 (一)运行效果 (二)实现步骤 1.创建安卓应用[DrawRotatingCube] 2.建模:立方体类 - Cube 3.渲染:立方 ...
- html设计一个图片墙,html5 绘制类似墙型的背景
最近开发的项目中要使用html5绘制各种虚线包括贝塞尔虚线.圆形虚线.各种虚线段,还包括各种形式的背景墙,截图如下: 从这张图片中可以看出有很多种形式的虚线和背景墙,下面主要介绍一下墙型背景,如下如: ...
最新文章
- GPT-3 的到来,程序员会被 AI 取代吗?
- [BZOJ 4800][Ceoi2015]Ice Hockey World Championship(Meet-in-the-Middle)
- 第四周作业 wcPro
- 服务器cpu,内存正常, 部分网站打不开,提示死锁,应用程序池回收就正常,如何解决?...
- UnaryOperator函数式接口
- CIKM'21 | 谷歌:推荐中的自监督对比学习
- 同一个事务里面对同一条数据做2次修改_[玩转MySQL之九]MySQL事务ACID[2-1]ACID详解...
- 动态数据源四种实现方案对比
- 贪心算法详细讲解(附例题,一看就会)
- 产品管理:新产品开发流程「权威指南」
- 简单的选课系统(6)——选课界面和管理员界面
- 使用Java化简逻辑表达式
- 算法---找出数组中的所有孤独数字(Kotlin)
- Struck: Structured Output Tracking with Kernels
- Laravel 使用 Entrust 实现 RBAC
- 百度地图定位经纬度返回4.9E-324有关问题
- matlab算原函数,matlab中原函数如何求解其中f(x)的导数为(22.05/x)的平方减1再开根号...
- iOS音视频开发八:视频编码,H.264 和 H.265 都支持
- pywin32下载安装
- openwrt - 入门( uHTTPd, opkg, uci, luci, mtd等)