<!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. 2018最新mfc作为上位机接收硬件端USB或串口数据显示成图片 解决串口接收数据丢字节丢包问题

    原文作者:aircraft 原文地址:https://www.cnblogs.com/DOMLX/p/9490616.html 本文用的是VS2013MFC写串口数据接收: 第一步:首先建立一个MFC ...

  2. 生成ks.cfg文件

    RHEL 7下生成ks.cfg文件 环境 + RHEL 7 + 字符界面, 没有安装图形界面 软件包安装 + `yum install system-config-kickstart -y` + `y ...

  3. 【linux】netstat 详解

    Linux netstat命令用于显示网络状态. 利用netstat指令可让你得知整个Linux系统的网络情况. 在Internet RFC标准中,Netstat的定义是: Netstat是在内核中访 ...

  4. java版两人聊天程序

    server.java import java.io.*; import java.net.*; import java.text.SimpleDateFormat; import java.util ...

  5. SQLServer 2016 Express 安装部署，并配置支持远程连接

    在项目中需要用到SQLServer,于是安装部署了SQLServer,部署的过程中遇到了一下问题,记录一下以便之后遇到同样问题能快速解决. 一.安装包下载 首先下载必要的安装包: 1.SQLServe ...

  6. Java 匿名内部类 & 内部类

    一.JAVA中内部类和匿名内部类的区别 内部类:内部类可以是static的或者非static的,static内部类只能包含静态方法和静态类变量,只能访问外部类的静态元素,内部类可以实例化,多次使用. ...

  7. 对HTML的大致了解

    HTML的全称是Hyper Text Markup Language(超文本标记语言),是一种标记语言.其中,HTML文档一个重要的.广泛使用的标准HTML4.01是在1999年12月24日由W3C组 ...

  8. angular1结合webpack构建工具

    目录结构 webpack.config.js const { resolve } = require('path') const webpack = require('webpack') const ...

  9. visual studio 调试 不进断点 断点失效 提示当前不会命中该断点等问题解决

    1.首先看一下  当前调试模式是否为debug 2. 点击[调试]>[选项和设置] 将[要求源文件与原始文件完全匹配]勾选掉 3.点击调试的最后一个选项 点击[web] 将调试器内部勾选上需要测 ...

  10. 【Leetcode】【Medium】Single Number II

    Given an array of integers, every element appears three times except for one. Find that single one. ...