HTML5 Canvas 八星聚义动态效果
昔有石碣村七星聚义,今有Canvas八星聚义。动态效果是,八颗星以等速螺线慢慢向中心聚集,最后汇聚成一颗。
效果:
代码:
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>八星聚义</title> </head> <body onload="draw()"> <canvas id="myCanvus" width="400px" height="400px" style="border:1px dashed black;"> 出现文字表示你的浏览器不支持HTML5 </canvas> </body> </html> <script type="text/javascript"> <!-- function draw(){ var canvas=document.getElementById('myCanvus'); canvas.height=; canvas.width=; var context=canvas.getContext('2d'); context.translate(,);// 原点移到中央 ){ setInterval(function(){ run(context); }, ); } }; ;// 角度 ;// 与圆心的举例 function run(context){ context.clearRect(-,-,,);// 清除图案 context.strokeStyle = "black"; // 横轴 context.beginPath(); context.moveTo(-, ); context.lineTo(,); context.stroke(); context.closePath(); // 纵轴 context.beginPath(); context.moveTo(, ); context.lineTo(,-); context.stroke(); context.closePath(); // 大圈 context.strokeStyle='black'; context.beginPath(); context.arc(,,,,*Math.PI,false); context.closePath(); context.stroke(); // 小圈 context.strokeStyle='black'; context.beginPath(); context.arc(,,,,*Math.PI,false); context.closePath(); context.stroke(); ){ delta+=;// 角度每次加十 distance-=0.4;// 举例每次减去十 ;i<;i++){ context.save(); context.rotate(getRad(i*)); context.translate(distance*Math.sin(getRad(delta)),distance*Math.cos(getRad(delta))); context.save(); context.rotate(getRad(-i*)); drawFiveStar(context,,,,getColor(i)); context.restore(); context.restore(); } }else{ distance=; delta=; context.save(); context.translate(distance*Math.sin(getRad(delta)),distance*Math.cos(getRad(delta))); drawFiveStar(context,,,,'black'); context.restore(); } } // 角度得到弧度 function getRad(degree){ *Math.PI; } // 得到颜色 function getColor(index){ ){ return "red"; }){ return "navy"; }){ return "green"; }){ return "yellow"; }){ return "pink"; }){ return "orange"; }){ return "olive"; }){ return "rose"; } } // 绘制五角星,多角星都可以由这个方法变化而来 function drawFiveStar(context,x,y,r,color){ context.strokeStyle = color; context.fillStyle = color; context.translate(x,y); ;i<;i++){ context.save(); context.rotate(getRad(/*i)); context.beginPath(); context.moveTo(, -r); context.lineTo(-Math.tan(getRad())*r, ); context.lineTo(Math.tan(getRad())*r,); context.lineTo(, -r); context.fill(); context.stroke(); context.closePath(); context.restore(); } } //--> </script>
HTML5 Canvas 八星聚义动态效果的更多相关文章
- HTML5 Canvas 六角光阑动态效果
光阑是光具组件中光学元件的边缘.框架或特别设置的带孔屏障,本人实现了结构比较简单的六角光阑,效果有点像宇航员在徐徐张开的飞船舷窗中看到逐渐完整的地球,下面四张图可以感受一下. 当然看动态效果才能真正体 ...
- HTML5 Canvas 绘制澳大利亚国旗
代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...
- HTML5 Canvas 绘制新西兰国旗
代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...
- HTML5 CANVAS 实现图片压缩和裁切
原文地址:http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/?utm_source=tuicool&utm_medi ...
- HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系
一.前面的所以然 技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了.新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全 ...
- HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系 【转】
HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系 这篇文章发布于 2011年10月10日,星期一,17:14,归类于 canvas相关. 阅读 58013 次, 今日 ...
- HTML5 Canvas 绘制英国国旗
代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- 赠书:HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
随机推荐
- ibatis selectKey
<insert id="insert" parameterClass="A"> <selectKey keyProperty="uu ...
- css盒模型与bfc与布局与垂直水平居中与css设计模式等
一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...
- bzoj2115【WC2011】XOR
题意:http://www.lydsy.com/JudgeOnline/problem.php?id=2115 sol :首先考虑处理出DFS树,那么树上的所有非树边可以构成一个简单环 因为所有不在 ...
- jmeter作接口测试入门的简单使用说明
一.添加接口信息 1.添加线程组 (1)路径如下图: (2)部分内容解释 a. Number of Threads(users):线程数 b. Ramp-Up Period(in seconds) ...
- AngularJS实现TodoMVC
一个小的to do list,界面如下 首先安装angular js,出现了无非安装到桌面的问题,安装到D盘了 npm install angular 文件结构: index.html: <!d ...
- pat 团体天梯赛 L2-010. 排座位
L2-010. 排座位 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 布置宴席最微妙的事情,就是给前来参宴的各位宾客安排座位. ...
- 【转】C#获取客户端及服务器端主机信息及其获取IP地址
原文发布时间为:2009-10-28 -- 来源于本人的百度文章 [由搬家工具导入] 小结: 1、REMOTE_ADDR 不可被修改,但是可能会获得代理服务器的IP,而不是实际客户端的IP。 2、通过 ...
- gridview行链接
原文发布时间为:2009-04-21 -- 来源于本人的百度文章 [由搬家工具导入] 点击行,链接!! 可这样,在GridView的RowDataBound输入代码,假如id在第0列,且不是摸板列: ...
- Python学习杂记_8_从程序外部传参的办法sys.argv
Python用 sys.argv[] 实现从程序外部传参 “外部”的含义,其实就是这些参数不是你在程序中定义的,而是在程序之外通过输入操作传递进来的.sys.argv 会返回一个元组,元组的首个元素即 ...
- 倒计时器CountDownLatch与同步屏障CyclicBarrier
CountDownLatch CountDownLatch是一个非常实用的多线程控制工具类,这个工具通常用来控制线程等待,它可以让某一个线程等待直到倒计时结束,再开始执行.在这里指CountDownL ...