canvas制作旋转的太极图

博主新手，请多谅解。欢迎指导！

以下为完整的代码段：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"></head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">// 获取 canvas 的对象var canvas = document.getElementById('canvas');// 获取 canvas 的绘图环境var ctx = canvas.getContext('2d');// 设置太极的圆心和半径var cx = canvas.width/2, cy = canvas.height/2, cr = 300;// 平移坐标系ctx.translate(cx,cy);// 初始旋转的角度var angle = 0;//封装函数function drawTaiji(){//构造函数function tj(fs,cx,cy,cr,d1,d2,b){this.fs = fs;this.cx = cx;this.cy = cy;this.cr = cr;this.d1 = d1;this.d2 = d2;this.b = b;//画圆this.show1 = function(){ctx.save();ctx.fillStyle = this.fs;ctx.beginPath();ctx.arc(this.cx,this.cy,this.cr,this.d1,this.d2,this.b);ctx.fill();ctx.restore();}//描边this.show2 = function(){ctx.save();ctx.StrokeStyle = this.fs;ctx.beginPath();ctx.arc(this.cx,this.cy,this.cr,this.d1,this.d2,this.b);ctx.stroke();ctx.restore();}}//实例化对象以及调用var tj1 = new tj('#fff',0,0,cr,0,Math.PI,true);tj1.show1();tj1.show2();var tj2 = new tj('#000',0,0,cr,0,Math.PI,false);tj2.show1();var tj3 = new tj('#000',0-cr/2,0,cr/2,0,Math.PI*2,true);tj3.show1();var tj4 = new tj('#fff',0+cr/2,0,cr/2,0,Math.PI*2,true);tj4.show1();var tj5 = new tj('#fff',0-cr/2,0,cr/7,0,Math.PI*2,true);tj5.show1();var tj6 = new tj('#000',0+cr/2,0,cr/7,0,Math.PI*2,true);tj6.show1();}// 用定时器处理 太极旋转setInterval(function(){// 保存状态ctx.save();// 坐标系旋转ctx.rotate(Math.PI/180*(angle+=2));drawTaiji();// 恢复状态ctx.restore();},33)
</script>
</body>
</html>

canvas制作旋转的太极图相关推荐

利用Canvas制作旋转的矩形
利用Canvas制作旋转的矩形 HTML5 Canvas API提供了强大的图形绘制功能,包括形状.颜色.线条样式等.在本文中,我将展示如何使用Canvas API创建一个旋转的矩形. 一.HTML结 ...
Html5 绘制旋转的太极图
采用Html5+JavaScript在Canvas中绘制旋转的太极图,如下图所示: 具体思路和绘制逻辑,在上图中已有说明,代码如下: 1 <script type="text/java ...
php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
使用canvas制作背景水印
记录使用canvas 制作文字背景水印 // 首先创建canvas标签并设置画布大小var watchCanvas = document.createElement('canvas'); // 创建 ...
canvas制作钟表
之前用html+css+JavaScript实现了一个简单钟表,但还是有一些问题,主要是一些css属性不同浏览器支持效果不一样,所以尝试用 canvas实现了一个简单的钟表,效果在下方,当然了,采用c ...
canvas制作简单钟表
之前用html+css+JavaScript实现了一个简单钟表,但还是有一些问题,主要是一些css属性不同浏览器支持效果不一样,所以尝试用 canvas实现了一个简单的钟表,效果在下方,当然了,采用c ...
H5上传图片并使用canvas制作海报
马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...
用离屏canvas制作仿Prezi页面转场动画特效
用离屏canvas制作网站页面特效.仿Prezi转场特效首屏效果页面切换转场效果 · 首屏圆形循环扩散效果首屏效果的难点在于圆形循环扩散动画和贝塞尔曲线的绘制.圆形逐渐扩大的动画并不难,关键在于 ...
canvas 制作动画（下）
canvas 制作动画(下) 1. 改变方向在 canvas 制作动画(上)已经介绍了如何创建动画,但还没有讨论如何控制形状动画的方式.我觉得只有直线动画会让人觉得很枯燥,不知你是否也这样想. 你已 ...

canvas制作旋转的太极图

canvas制作旋转的太极图相关推荐

最新文章

热门文章