<!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. log4j 2整理

    # Log4j 2最佳实践 #Log4j的1.x版本已经被广泛使用于很多应用程序中.然而,它这些年的发展已经放缓.它变得越来越难以维护,因为它需要严格遵循很老的Java版本,并在2015年8月寿终正寝 ...

  2. js event鼠标事件

    1,鼠标焦点事件 <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...

  3. Java Collection.Set

    package 集合; /** * Set不包含重复元素 存储顺序和取出数据不一样 * * HashSet:它不保证set的迭代顺序,特别是它不保证该顺序恒久不变 * 底层是哈希表结构的 * Link ...

  4. Object 公共方法详解

    在C#中,所有类型最终都从System.Object派生,所以每个类型的每个对象都保证了一组最基本的方法.具体地说,System.Object提供了一组公共实例方法. 一.Equals 如果两个对象具 ...

  5. SQL中CASE 的用法 转载

    sql语言中有没有类似C语言中的switch case的语句?? 没有,用case   when   来代替就行了.              例如,下面的语句显示中文年月 select getdat ...

  6. springboot vue组件写的个人博客系统

    个人写的博客管理系统,学习java不到一年 欢迎探讨交流学习 https://github.com/Arsense/ssmBlog  项目地址 如果觉得好的 帮忙star一下 谢谢! 基本技术 环境: ...

  7. Jquery系列:textarea常用操作

    1.textarea内容的读取与设置 读textarea文本值可以用name和id.而写入文本值只能用id. <textarea name="content" id=&quo ...

  8. WinSock 重叠IO模型

    title: WinSock 重叠IO模型 tags: [WinSock 模型, 网络编程, 重叠IO模型] date: 2018-06-29 20:26:13 categories: Windows ...

  9. Java程序员应该知道的linux命令

    1.查看Java进程:ps -ef|grep java,ps auxf|grep jva; 2.杀死所有Java进程: pkill java, kill -9 进程ID: 3.进入目录:cd /usr ...

  10. svn自动更新网站代码

    运行环境说明:svn的执行目录: /usr/bin/svnsvn版本库目录: /usr/local/nginx/html/svnrepos/coinhello (其中svnrepos是我各个项目版本库 ...