HTML 5：绘制旋转的太极图

2019独角兽企业重金招聘Python工程师标准>>>

HTML：

<!DOCTYPE><html><head><meta charset="utf-8" /><title>Canvas绘制旋转太极</title></head><body><canvas id="face" width="200" height="200"></canvas></body></html>

JavaScript:

var canvas = document.getElementById("face");var cxt = canvas.getContext('2d');var r = 100;   //半径var pointX = 0;  //圆心x坐标var pointY = 0; //圆心y坐标// 绘制扇形填充function pie (g,radius,startAngle,endAngle,color,x,y) {g.fillStyle = color;g.beginPath();g.arc(x,y,radius,startAngle,endAngle,true);g.closePath();g.fill();} var q = 0; function redrawTaiji(){     // 保存状态cxt.save();     // 清理图像cxt.clearRect(0,0,canvas.width,canvas.height);cxt.translate(100,100);q += Math.PI / 6;cxt.rotate(q);cxt.beginPath();     // 绘制两个最大圆pie(cxt,r,3/4*Math.PI*2,5/4*Math.PI*2,"#FF072A",pointX,pointY);pie(cxt,r,1/4*Math.PI*2,3/4*Math.PI*2,"#195089",pointX,pointY);     // 绘制两个中圆pie(cxt,r/2,0,Math.PI*2,"#FF072A",pointX,pointY+r/2);pie(cxt,r/2,0,Math.PI*2,"#195089",pointX,pointY-r/2);     // 绘制两个最小圆pie(cxt,r/4,0,Math.PI*2,"#FF072A",pointX,pointY-r/2);pie(cxt,r/4,0,Math.PI*2,"#195089",pointX,pointY+r/2);cxt.closePath();     // 恢复状态cxt.restore();} function initTaiji(){redrawTaiji();setInterval(redrawTaiji,500);}initTaiji();

效果:http://jsfiddle.net/Web_Code/88c9d2g2/embedded/result/

原文首发：http://www.ido321.com/1308.html

转载于:https://my.oschina.net/461147874/blog/356300

HTML 5：绘制旋转的太极图相关推荐

Html5 绘制旋转的太极图
采用Html5+JavaScript在Canvas中绘制旋转的太极图,如下图所示: 具体思路和绘制逻辑,在上图中已有说明,代码如下: 1 <script type="text/java ...
安卓学习笔记38：利用OpenGL ES绘制旋转立方体
文章目录零.学习目标一.绘制图形基本步骤二.绘制旋转立方体 (一)运行效果 (二)实现步骤 1.创建安卓应用[DrawRotatingCube] 2.建模:立方体类 - Cube 3.渲染:立方 ...
java如何画百分比圆环_canvas绘制旋转的圆环百分比进度条
作者:依然 | 时间:2015-05-29 | 阅读:122 canvas绘制旋转的圆环百分比进度条从上一篇的文章使用HTML5 Canvas arc()绘制圆形/圆环我们了解到了怎么使用ca ...
MATLAB表白玫瑰花绘制——旋转玫瑰、蓝色玫瑰
MATLAB表白玫瑰花绘制--旋转玫瑰.蓝色玫瑰搬运不易,路过的各位大佬请点个赞 MATLAB表白玫瑰花绘制--旋转玫瑰.蓝色玫瑰 MATLAB表白玫瑰花绘制--旋转玫瑰.蓝色玫瑰一.旋转玫瑰花绘 ...
MFC---定时器和双缓冲机制绘制旋转的金刚石图案
双缓冲原理 MFC中绘制动画的基本思路是在固定时间间隔内绘制图像,然后擦除旧图像再绘制新图像,这样连续起来就在人类的视觉上形成动画.为了实现这种"绘制-擦除-再绘制&quo ...
纯css 旋转的太极图
效果代码 <!doctype html> <html> <head lang="en"> <meta charset="utf ...
MFC绘制旋转Bezier曲面
MFC绘制旋转Bezier曲面给出一条Bezier曲线,通过旋转64个控制点,4个曲面片,绘制出一个完整曲面已知四个控制点:(50,100)(150,70)(120,-30)(90,-80) 理论 ...
使用matlab画可以旋转的太极图
对于太极图,我在网上也找了一些方法来画.最后我选择了这个. 主要思路就是,先画两个大的半圆,拼成太极最外圈的圆,然后画两个小圆(小圆的位置可以自己多调几次,自己看的舒服就好),接着再画两个半圆,作为太 ...
利用QPainter基本函数+rotate/translate绘制旋转图形的方法
通常利用QPainter的drawXXX函数绘制的图形都是不带旋转的,而QPainter的rotate函数解释如下: void QPainter::rotate(qrealangle) Rotates ...

HTML 5：绘制旋转的太极图

HTML 5：绘制旋转的太极图相关推荐

最新文章

热门文章