<!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. nyoj 220——推桌子——————【贪心】

    推桌子 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 The famous ACM (Advanced Computer Maker) Company has re ...

  2. CF 303C——Minimum Modular——————【剪枝】

    Minimum Modular time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  3. C# 深入理解String

    关于C#中的类型 在C#中类型分为值类型和引用类型,引用类型和值类型都继承自System.Object类,几乎所有的引用类型都直接从System.Object继承,而值类型具体一点则继承System. ...

  4. <meta http-equiv="X-UA-Compatible" content="IE=edge" />详解

    X-UA-Compatible是针对IE8新加的一个设置,对于IE8之外的浏览器是不识别的,这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE> ...

  5. HDU 5011 NIM博弈

    http://www.cnblogs.com/exponent/articles/2141477.html http://acm.hust.edu.cn/vjudge/contest/122814#p ...

  6. 线程安全的Dictionary

    线程安全的DictionaryConcurrentDictionary<TKey, TValue> 类

  7. 对 Vue 的理解（一）

    一.什么是 Vue ? 首先,Vue 是一个 MVVM 框架,M -- 模型,就是用来定义驱动的数据,V -- 视图,是经过数据改变后的 html,VM -- 框架视图,就是用来实现双向绑定的中间桥梁 ...

  8. python作业-网络编程

    1.什么是C/S架构? 答:C指的是client(客户端软件),S指的是Server(服务端软件) 2.互联网协议是什么?分别介绍五层协议中每一层的功能? 答:互联网的核心就是由一堆协议组成.如果把计 ...

  9. vue授权页面登陆之后返回之前的页面

    import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)import home from "@/pages/ho ...

  10. 我为什么不用Django而用Flask？

    前言 对于初学者来说,找到一个好的框架来学习或者项目开发都是非常有必要的,而当你有一定开发经验后,你应该选择适合当前业务需要的框架.我这里并不想探讨哪个框架好哪个不好,这个永恒的话题就跟探讨“世界上哪 ...