HTML5自学笔记[ 15 ]canvas绘图实例之钟表
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas绘图小实例之方块移动</title> <style> body{ background:#000;} #canvas1{ margin:100px 500px; background:#fff;} #canvas1 span{ color:#fff;} </style> <script> window.onload = function(){ var oCanvas = document.getElementById('canvas1'); var oContext = oCanvas.getContext('2d'); //获取绘图的2d环境 function tick(){ oContext.clearRect(0,0,oCanvas.width,oCanvas.height); //画表盘 oContext.beginPath(); for(var i=0;i<60;i++){ oContext.moveTo(300,300); oContext.arc(300,300,200,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false); } oContext.stroke(); oContext.beginPath(); oContext.arc(300,300,200*0.9,0,360*Math.PI/180,false); oContext.fillStyle= "white"; oContext.fill(); oContext.beginPath(); for(var i=0;i<12;i++){ oContext.moveTo(300,300); oContext.arc(300,300,200,i*30*Math.PI/180,(i+1)*30*Math.PI/180,false); } oContext.lineWidth = 3; oContext.stroke(); oContext.beginPath(); oContext.arc(300,300,200*0.87,0,360*Math.PI/180,false); oContext.fill(); //获取时间 var oDate = new Date(); var oHour = oDate.getHours(); var oMin = oDate.getMinutes(); var oSec = oDate.getSeconds(); var degHour = (-90+oHour*30+oMin/2)*Math.PI/180; var degMin = (-90+oMin*6)*Math.PI/180; var degSec = (-90+oSec*6)*Math.PI/180; //画时针 oContext.beginPath(); oContext.moveTo(300,300); oContext.arc(300,300,200*0.5,degHour,degHour,false); oContext.lineWidth = 5; oContext.stroke(); //画分针 oContext.beginPath(); oContext.moveTo(300,300); oContext.arc(300,300,200*0.7,degMin,degMin,false); oContext.lineWidth = 3; oContext.stroke(); //画秒针 oContext.beginPath(); oContext.moveTo(300,300); oContext.arc(300,300,200*0.8,degSec,degSec,false); oContext.lineWidth = 1; oContext.stroke(); } tick(); setInterval(tick,1000); } </script> </head> <body> <canvas id="canvas1" width="600" height="600"> <span>该浏览器不支持canvas</span> </canvas> </body> </html>
HTML5自学笔记[ 15 ]canvas绘图实例之钟表的更多相关文章
- HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 21 ]canvas绘图实例之马赛克
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 15 ]canvas绘图基础6
关于线条的一些属性: lineCap,这个属性表示的是线条两端的样式,值有butt(默认)/round/square. lineJoin,这个属性表示线条相交的方式,值有miter(默认)/bevel ...
- HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5自学笔记[ 11 ]canvas绘图基础1
html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...
- HTML5自学笔记[ 24 ]canvas绘图之星空草地
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 17 ]canvas绘图基础4
绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...
随机推荐
- C# DataTable的详细用法
在项目中经常用到DataTable,如果DataTable使用得当,不仅能使程序简洁实用,而且能够提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 一.DataTable简 ...
- ubuntu下读取数据库中文乱码解决
请按如下配置myqsl.cnf (/etc/mysql/mysql.conf.d/mysql.cnf ),然后重启mysql服务,对于web程序,你可以把web所有编码都搞成utf-8[client] ...
- PE结构笔记
提示:前面加*为必须背下来的 DOS头: typedef struct _IMAGE_DOS_HEADER { // DOS .EXE header WORD e_magic; //* Magic n ...
- CUBRID学习笔记 22 插入数据
CREATE TABLE auto_tbl(id INT AUTO_INCREMENT, name VARCHAR); 自增长的列可以插入null, 同时一次可以插入多条记录.别的和其他的sql数据库 ...
- lotus 公式
函数 描述@UserName 返回用户名或服务器名.@Name([key]; name) 更改用户名的格式.关键字包含 [CN] 以从一个专有名字中解析出公共名,[Abbreviate] 缩写规范格式 ...
- 对List中对象的去重
今天项目中遇到了一个对List中对象去重的问题. 首先对于我们自己系统中的对象我们只要重写该对象的 equal 和 hashcode 即可(利用对象中的能够唯一确定对象的属性). 但是我遇到的不是本系 ...
- 使用Maven构建Web项目
现自己在重新操作一下:(使用的是Eclipse JavaEE版 ps:eclipse-jee-indigo-SR1-win32,已经安装好了m2eclipse插件) 1.新建Maven项目 1.1 F ...
- Tomcat的使用
Tomcat的安装较为简单,尤其是Tomcat的安装文件apache-tomcat-7.0.19-windows-x86.zip,直接解压至目标目录下即可. Tomcat的安装目录下包括bin.con ...
- Java集合的Stack、Queue、Map的遍历
Java集合的Stack.Queue.Map的遍历 在集合操作中,常常离不开对集合的遍历,对集合遍历一般来说一个foreach就搞定了,但是,对于Stack.Queue.Map类型的遍历,还是有一 ...
- RTC框架
RPC是系统间的一种通信方式,系统间常用的通信方式还有http,webservice,rpc等,一般来讲rpc比http和webservice性能高一些,常见的RPC框架有:thrift,Finagl ...