<!doctype html>
<html>
<head></head>
<body>
<canvas width="1000" height="800" style="background:#abcdef" id="canvas">
您的浏览器当前版本不支持canvas标签
</canvas>
<button onclick="clearInterval(s)">Stop interval</button>
<script>
//获取画布DOM 还不可以操作
var canvas=document.getElementById('canvas');
//alert(canvas);
//设置绘图环境
var cxt=canvas.getContext('2d');
//alert(cxt);
var count=0;
function funrac(){
cxt.clearRect(0,0,1000,800);
//画一条线段。
//开启新路径
cxt.beginPath();
cxt.lineWidth=8;
cxt.strokeStyle="#ff9900";
cxt.arc(500,400,100,0,360,false);
cxt.stroke();
cxt.closePath();

for(var i=0;i<12;i++){
cxt.save();
cxt.lineWidth=3;
cxt.translate(500,400);
cxt.rotate(-count+i*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,0);
cxt.lineTo(0,100);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
count++;
}
funrac();
var s = setInterval(funrac,10);

</script>
</body>
</html>

HTML5之转动的轮子的更多相关文章

  1. 打造 html5 文件上传组件，实现进度显示及拖拽上传，支持秒传+分片上传+断点续传，兼容IE6+及其它标准浏览器

    老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery ...

  2. 矢量化的HTML5拓扑图形组件设计

    HT一直被客户称道的就是其全矢量化的设计特色,矢量相比传统图片好处太多了: www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html ...

  3. HTML5游戏设计与开发 小白7-9月的动态

    好久没有更新博客了,最近在努力修炼提升逼格,当然了还有个恶心的毕业论文... 当然啦...在写这个论文的时候也就是为了提升下自身的技术,毕竟我的公司也不是游戏公司,SO 我决定开发个手机游戏.然后考虑 ...

  4. 设计师必看的10个HTML5动画工具

    如果你想用令人难以置信的动画创建引人注目的网站的话,那么这里为设计师精心挑选了一些必备的HTML5动画工具.HTML5是设计师用来打造时尚网站的最流行的编程语言之一.在过去三年内,这种编程语言的使用人 ...

  5. HTML5实现动画三种方式

    编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现. PS:由于显卡.录制 ...

  6. html5 canvas 圆形抽奖的实例

    年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走. 其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也 ...

  7. WeX5与阿里内测的Weex与有何纠葛？快来看HTML5开发圈那些逗逼事儿！

    4月21日~23日,由infoQ主办的2016 Qcon大会北京站如期举行. HTML5开发已经成为移动开发/前端专题中无可争议的焦点,核心议题已经由前几年的是否该用HTML5转向了如何高性能.高效率 ...

  8. 《HTML5经典坦克大战》游戏（代码）

    前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而 ...

  9. Make Things Move -- Javascript html5版（一）文件目录结构和工具方法准备

    从这一篇开始,就来开始我们的make things move之旅吧 在此之前,要知道ActionScript(AS)的语法和JS是不一样的,AS是相对于JS而言更好的支持了面向对象的特性,所以我们可以 ...

随机推荐

  1. TOJ 2888 Pearls

    Description In Pearlania everybody is fond of pearls. One company, called The Royal Pearl, produces ...

  2. mongodb常用语句(集合操作)

    mongodb常用语句(集合操作) 查看集合帮助 db.songs.help(); 查看集合总数据量 db.songs.count(); 查看表空间大小 db.songs.dataSize(); 查看 ...

  3. ContextCapture水面约束(水面破洞修复)

      [问题描述] 对于水面而言,由于特征点较少,软件在计算时很难匹配正确,导致输出模型的水面通常是支离破碎的.软件针对这种情况提供了一个约束工具,用户手动的为水面添加平面约束后,输出的水面模型就会非常 ...

  4. HDU 5288——OO’s Sequence——————【技巧题】

    OO’s Sequence Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  5. JavaScript 闭包初认识

    1.简单的例子 首先从一个经典错误谈起,页面上有若干个div, 我们想给它们绑定一个onclick方法,于是有了下面的代码 <ul id="divTest"> < ...

  6. 模糊查询-动态参数，防SQL注入

    WHERE("title like '%'+#{keyWord}+'%'"); -MS SQL WHERE("title like concat('%',#{keyWor ...

  7. 标准c库函数和linux系统函数的关系

    c库IO函数的工作流程 c库函数与系统函数的关系 虚拟地址空间 文件描述符

  8. SQLAlchemy的使用---M2M增删改查

    from sqlalchemy.orm import sessionmaker from sqlalchemy_M2M import engine, Girls, Boys Session = ses ...

  9. .NET开源工作流RoadFlow-表单设计-单选按钮组

    单选按钮组即:<input type='checkbox'/>控件: 绑定字段:与数据表的某个字段绑定. 数据源: 1.数据字典:在下面字段项中选择对应在数据字典项. 2.自定义:自己输入 ...

  10. matlab练习程序（矩形变换为圆）

    最近对图像坐标的变换很感兴趣啊,这次是将一张图像变换为圆形. 变换原理就是按变换前后像素到圆心的距离按比例缩减就行了. 改变x,y方向上的系数,应该还可以变换为椭圆,不过我还没有尝试. 注意我这里相当 ...