- 浏览: 67805 次
- 性别:
- 来自: 绍兴
最新评论
<html> <head> <title>JS</title> </head> <body> <canvas id="square" width=500 height=500></canvas> <script> var deg = Math.PI/180; function snowflake(c, n, x, y, len) { c.save(); // Save current transformation c.translate(x,y); // Translate origin to starting point c.moveTo(0,0); // Begin a new subpath at the new origin leg(n); // Draw the first leg of the snowflake c.rotate(-120*deg); // Now rotate 120 degrees counterclockwise leg(n); // Draw the second leg c.rotate(-120*deg); // Rotate again leg(n); // Draw the final leg c.closePath(); // Close the subpath c.restore(); // And restore original transformation // Draw a single leg of a level-n Koch snowflake. // This function leaves the current point at the end of the leg it has // drawn and translates the coordinate system so the current point is (0,0). // This means you can easily call rotate() after drawing a leg. function leg(n) { c.save(); // Save the current transformation if (n == 0) { // Nonrecursive case: c.lineTo(len, 0); // Just draw a horizontal line } // _ _ else { // Recursive case: draw 4 sub-legs like: \/ c.scale(1/3,1/3); // Sub-legs are 1/3rd the size of this leg leg(n-1); // Recurse for the first sub-leg c.rotate(60*deg); // Turn 60 degrees clockwise leg(n-1); // Second sub-leg c.rotate(-120*deg); // Rotate 120 degrees back leg(n-1); // Third sub-leg c.rotate(60*deg); // Rotate back to our original heading leg(n-1); // Final sub-leg } c.restore(); // Restore the transformation c.translate(len, 0); // But translate to make end of leg (0,0) }} var canvas = document.getElementById("square"); c2 = canvas.getContext("2d"); snowflake(c2,4,150,115,125); c2.stroke(); </script> <!--<svg> <defs> <linearGradient id="fade"> <stop offset="0%" stop-color="#008"/> <stop offset="100%" stop-color="#ccf"/> </linearGradient> </defs> <rect x="100" y="100" width="300" height="200" stroke="black" stroke-width="25" fill="url(#fade)"/> </svg>--> <input type="button" value="input" onclick="aaa()"/> </body> </html>
发表评论
-
Web开发学习13聊聊java反射
2016-07-12 18:41 717很喜欢一本叫《走出软件作坊》的书,其中有一句话让我较为深刻,“ ... -
Web开发学习12 浅谈设计模式
2016-07-01 13:33 1282在我刚接触 ... -
Web开发学习11 全局缓存控制
2015-10-12 14:27 705缓存用的好可以减少数据库的压力,在大并发的情况下极大的提升服务 ... -
Web开发学习10 hadoop实战
2015-10-09 14:02 697前一篇说到项目记录了很多埋点日志,当有一天项目需求需要对这些日 ... -
Web开发学习(9)全局埋点
2015-07-27 11:10 1958埋点的作用是把客户端每次访问服务端的操作记录下来,包括请求连接 ... -
Web开发学习8Struts2基类封装
2015-07-24 12:03 667一个好的基类可以帮助开发者减少很多开发工作,像我这种爱偷懒的人 ... -
Web开发学习7按钮级别权限控制
2015-07-23 16:21 13249这个功能的思路是自己原创的,没看过其他例子,其实是在做之前网上 ... -
Web开发学习6添加liqiubase
2015-07-22 14:29 1403开发过程中经常碰到数据库更改的情况,在日常环境下如果每位开发人 ... -
浅列JavaEnum
2014-01-05 16:42 748enum Province{ ZHEJIANG,SHANGHA ... -
maven常用命令
2013-07-08 10:20 7511、创建普通Java项目: ... -
html5 audio与video方法属性事件概括
2012-12-20 14:46 1062play() 继续播放 pause() ... -
spring 整合mina
2012-12-20 11:48 1072首先定义自定义过滤器 <bean id=" ... -
Web开发学习(5)添加springsecurity应用
2011-12-14 15:00 921我学习公司这个架构多半就是为了把springsecurity搞 ... -
Web开发学习(4)添加spring应用
2011-12-14 14:45 760印象中似乎没做过不用spring的项目,因为它在web开发中的 ... -
Web开发学习(3)配置struts-tiles插件(附带json插件)
2011-12-05 15:22 2515struts的tiles插件是非常实用的,从某些方面可以很好的 ... -
使用线程删除导出临时文件
2011-12-01 16:33 2219项目支持大数据量导出e ... -
jQuery实现表格行点击选中复选框
2011-11-23 12:36 5941这个需求是在项目完成后客户提出的要求,看似简单但是还需要一点小 ... -
Web开发学习(2)配置convention插件
2011-11-04 10:28 1347注解的方式某些程度上能减少xml的配置量,个人感觉使程序更加清 ... -
Web开发学习(1)使用eclipse搭建maven项目
2011-10-20 10:04 5695首先用eclipse创建工程 ne ... -
数据库连接泛型基类创建
2011-06-30 11:49 953记录 以便以后参考---- 基类代码 public cl ...
相关推荐
网页动画素材 canvas绘制四边形棱镜,酷炫的粒子飞出动画特效。(抖音资料)网页动画素材 canvas绘制四边形棱镜,酷炫的粒子飞出动画特效。(抖音资料)网页动画素材 canvas绘制四边形棱镜,酷炫的粒子飞出动画特效...
使用canvas绘制钟表 使用canvas绘制钟表 使用canvas绘制钟表
canvas绘制动态心电图,和监护仪上的一样,可参考使用!
HTML5 canvas绘制流程图,无需flash,支持形状伸缩、编辑文字、拖拽、节点连线功能,类似visio。
canvas绘制音频波形demo
ECG html canvas绘制心电图
html5结构图canvas绘制组织结构图框架代码 html5结构图canvas绘制组织结构图框架代码
基于openlayers和canvas绘制海量数据的实现
Canvas绘制心电图
主要介绍了canvas绘制文本内容自动换行的实现代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀! Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀! Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀! Canvas绘制3D烟花动画特效,js...
用原生canvas绘制仪表盘,代码简单,参数可传递。本代码既可以用于学习canvas,也可以用于项目中。
网页热力图绘制,绘制在canvas上的 heatmap.js,包含源码和插件示例等。
2.22_用canvas绘制一角弯月|canvas曲线的绘制(圆弧和贝塞尔曲线)|Canvas图形、动画、游戏开发从入门到精通全
HTML5_canvas动态画出视图树,HTML5_canvas绘制动态树视图 类似结构图的形式,点击新增节点即可以自动生成 树状图形,可通过删除节点删除树节点。
文件中有封装好的绘制圆形、矩形以及不规则图形的方法,直接拿到适合自己的场合下用即可
html5 canvas绘制3D地球旋转动画特效
html5 canvas 绘制动态心电图,根据医院里的一模一样。 html5 canvas 绘制动态心电图,根据医院里的一模一样。
使用Canvas类绘制android机器人
html5 canvas绘制时钟表时间是一款用canvas精灵绘制器绘制的时钟表时间特效。