HTML5 之Canvas 绘制时钟 Demo
<!DOCTYPE html>
<html>
<head>
<title>Canvas 之 时钟 Demo</title>
<!--简单 样式模版-->
<style type="text/css">
*
{
margin: 0;
padding: 0;
font-family: YaHei Consolas Hybrid,宋体;
font-size: 14px;
list-style: none;
}
.wrapper
{
margin: 50px auto;
width: 400px;
padding: 10px;
border: solid 1px gray;
background-color: #eee;
overflow:auto;
}/*H1浅蓝阴刻字*/
body
{
background-color: gray;
}
h1
{
text-align: center;
display: block;
background-color: #C4DEF7;
color: #344251;
font: normal 30px "微软雅黑";
text-shadow: 1px 1px 0px #DEF3FF;
padding: 5px 0px;
margin:10px;
box-shadow: 0px 2px 6px #000;
border-radius:10px;
}
input[type='button'],input[type='submit'] { padding:2px 5px;} #clockMap { background-color:White;}
</style>
</head>
<body>
<h1>
Canvas 之 时钟 Demo
</h1>
<div class="wrapper">
<canvas width="400" height="400" id="clockMap"></canvas>
<script type="text/javascript">
//获取画面DOM对象
var canvas = document.getElementById("clockMap");
//获取2D画布的上下文
var map = canvas.getContext("2d"); //格式化时间格式为00:00:00来显示
var formatTime = function (time) {
return time < 10 ? "0" + time : time;
} //注意:在画时分秒的针时,一定要先保存环境,画完再回到环境中,不能一次画三针
var drawClock = function () {
//清屏
map.clearRect(0, 0, 400, 400);
//保存当前环境
map.save(); //绘制表盘
map.beginPath();
map.lineWidth = 10;
map.storkeStyle = "black";
map.arc(200, 200, 150, 0, 360, true);
map.stroke();
map.closePath(); //绘制刻度
map.translate(200, 200);
for (var i = 0; i < 60; i++) {
if (i % 5 == 0) {
map.beginPath();
map.lineWidth = 4;
map.strokeStyle = "red";
map.moveTo(135, 0);
map.lineTo(143, 0);
map.stroke();
map.closePath();
}
else {
map.beginPath();
map.lineWidth = 2;
map.strokeStyle = "black";
map.moveTo(140, 0);
map.lineTo(143, 0);
map.stroke();
map.closePath();
}
map.rotate(6 * Math.PI / 180);
} //绘制数字
map.textAlign = "center";
map.textBaseline = "middle";
map.font = "bold 30px Arial";
map.fillText("3", 115, 0);
map.fillText("6", 0, 115);
map.fillText("9", -115, 0);
map.fillText("12", 0, -115); //========绘制时针,分针,秒针========
//获取当前时间
var date = new Date();
var hours = date.getHours();
var minute = date.getMinutes();
var seconds = date.getSeconds();
hours = hours > 12 ? hours - 12 : hours;
var hour = hours + minute / 60; //绘制时针
map.save();
map.beginPath();
map.rotate((hour * 30 - 90) * Math.PI / 180);
map.lineWidth = 6;
map.moveTo(-10, 0);
map.lineTo(90, 0);
map.closePath();
map.stroke();
map.restore(); //绘制分针
map.save();
map.beginPath();
map.rotate((minute * 6 - 90) * Math.PI / 180);
map.lineWidth = 4;
map.moveTo(-10, 0);
map.lineTo(132, 0);
map.closePath();
map.stroke();
map.restore(); //绘制秒针
map.save();
map.beginPath();
map.rotate((seconds * 6 - 90) * Math.PI / 180);
map.lineWidth = 2;
map.strokeStyle = "red";
map.moveTo(-10, 0);
map.lineTo(138, 0);
map.closePath();
map.stroke();
map.restore(); //中心点
map.save();
map.beginPath();
map.arc(0, 0, 4, 0, 360, true);
map.closePath();
map.lineWidth = 2;
map.strokeStyle = "red";
map.fill();
map.stroke();
map.restore(); //时间显示
map.save();
map.font = "24px Arial";
map.fillText("当前时间:"+formatTime(hours) + ":" + formatTime(minute) + ":" + formatTime(seconds), -1, -180);
map.restore(); //将画好的时钟显示在之前保存的环境中
map.restore();
} //加载时,执行一次,避免刷新时,有一秒的延迟
drawClock(); //开启定时器
window.setInterval(drawClock, 1000);
</script>
</div>
</body>
</html>
效果图:
HTML5 之Canvas 绘制时钟 Demo的更多相关文章
- 使用canvas绘制时钟
使用canvas绘制时钟 什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
- html5 Canvas绘制时钟以及绘制运动的圆
1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...
- HTML5 之Canvas绘制太阳系
<!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...
- Canvas绘制时钟
①首先在HTML的body标签中添加一个canvas标签,用于绘制时钟. <canvas id="myCanvas" width="600" height ...
- html5的canvas绘制迷宫地图
canvas标签一直是html5的亮点,用它可以实现很多东西.我想用它来绘画像迷宫那样的地图.借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接). 如图:如果你想要画像这样的迷宫地图,如果不 ...
- 小任务之Canvas绘制时钟
背景图的绘制(大圆.数字.小圆点) 掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算,数学中关于sin cos的用法 圆的弧度为2*Math.PI 12个数字分得弧度每个为2*Math.PI/ ...
- 【HTML5】Canvas绘制基础
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- 用canvas绘制时钟
用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id=& ...
- HTML5 Canvas 绘制时钟
网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas ...
随机推荐
- [Xcode 自带svn的使用]
xcode自带svn的使用 1.代码中 某文件后面有 “M” 标记,表示该文件已被修改,需要commit. (右键该文件 -> source control -> c ...
- 第三次作业——K米评测
第一部分 调研,评测 1.第一次上手体验 其实让我下载一个APP并且长期使用它是一件特别难的事情,不仅是因为占空间,需要注册个人信息,绑定账号,更是因为每款软件的功能虽然都很齐全,但是你并在没有真正用 ...
- 更改primefaces theme
PrimeFaces is using jQuery ThemeRoller CSS theme framework, and come with 30+ pre-designed themes th ...
- mac系统的一些操作常识
mac系统如何显示和隐藏文件 苹果Mac OS X操作系统下,隐藏文件是否显示有很多种设置方法,最简单的要算在Mac终端输入命令.显示/隐藏Mac隐藏文件命令如下(注意其中的空格并且区分大小写): 显 ...
- Win8.1微软官方最终正式版ISO镜像文件
Win8.1微软官方最终正式版ISO镜像文件 经过预览版,测试版.开发版本等几个乱七八糟的版本后,2013年10月17日,微软终于如约的发布了Win8.1最终正式版. Win8.1和win8的区别 1 ...
- k-nearest-neighbor算法
1. kNN 1.1 基本的kNN模型 kNN(k-nearest neighbor)的思想简单来说就是,要评价一个未知的东西U,只需找k个与U相似的已知的东西,并通过k个已知的,对U进行评价.假如要 ...
- 使用RawSocket进行网络抓包
aw socket,即原始套接字,可以接收本机网卡上的数据帧或者数据包,对与监听网络的流量和分析是很有作用的,一共可以有3种方式创建这种socket. 中文名 原始套接字 外文名 RAW SOCKET ...
- Java——菜单组件
import java.awt.Container; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; i ...
- redis删除list中指定index的值
Redis的List删除命令: lrem : lrem mylist 0 "value" //从mylist中删除全部等值value的元素 0为全部,负值为从尾部开始. ...
- osharp3 整合 dbcontextscope 文章2 将dbcontext的创建收回到ioc管理
osharp3 整合 dbcontextscope 后,,dbcontextscope 对dbcontext管理的很好,做到,用到时创建,不用时销毁,下面看一个 trace aspx.page: En ...