<!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. HttpServlet的请求转发理解

    一个http请求的流转,其实主要涉及到五部分的内容,第一部分就是request所包含的参数,也就是request.getAttribute能获取的东西:第二部分是request所携带的内容实体,这部分 ...

  2. C# 批量生成随机密码，必须包含数字和字母，并用加密算法加密

    要求:密码必须包含数字和字母 思路:1.列出数字和字符. 组成字符串 :chars 2.利用randrom.Next(int i)返回一个小于所指定最大值的非负随机数. 3. 随机取不小于chars长 ...

  3. 初学C#——选号器

    private void Form1_Load(object sender, EventArgs e) { Random x = new Random(); ); //生成一个大于等于0,小于100之 ...

  4. Cookie的创建、读取、删除

    创建Cookie: HttpCookie cookie =  new HttpCookie(COOKIE_NAME_FOR_USER);cookie.Expires = DateTime.Now.Ad ...

  5. C#中TransactionScope的使用方法和原理(摘)

    出自51CTO博客:http://cnn237111.blog.51cto.com/2359144/1271600 在.net 1.1的时代,还没有TransactionScope类,因此很多关于事务 ...

  6. python中操作列表

    1.遍历列表 可以用for循环遍历打印非常实用 摸板: for 临时变量 in 列表 : print(临时变量) 注意缩进 , 注意冒号 2.创建数值列表 (1)使用range()函数 , 函数的范围 ...

  7. webpack、babel模块、模块化

    一.webpack介绍 webpack这个工具非常强大,解决了前端很繁琐的一些工具流程繁琐的事情.中文官网链接地址:https://www.webpackjs.com/ 1.为什么要使用webpack ...

  8. 类数组转数组Array.prototype.slice.call(arrayLike)

    转换方式:Array.prototype.slice.call(arrayLike) 附:(http://www.jianshu.com/p/f8466e83cef0) 首先Array.prototy ...

  9. C++基础--static的用法

    首先,看看变量的存储: int global ; int main() { int stackStore ; int heapStore* = (int *)malloc(sizeof(int)); ...

  10. 使用 Python 设置数据的路径

    使用 Python 设置数据的路径 编程语言(如 Python)将反斜线 (\) 用作转义字符.例如,\n 表示换行符,\t 表示制表符.指定路径时,可使用正斜线 (/) 代替反斜线.使用两条反斜线( ...