html5 canvas 钟表
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{
background:pink;
}
#c1{
background:white;
}
</style>
<script>
window.onload = function ()
{
var oc = document.getElementById('c1');
var ogc = oc.getContext('2d'); function toDraw()
{
var x = 200;
var y = 200;
var r = 150; ogc.clearRect(0,0,oc.width,oc.height); var aDate = new Date();
var oHouse = aDate.getHours();
var oMin = aDate.getMinutes();
var oSen = aDate.getSeconds(); var oHoursevalue = ( -90 + oHouse*30 + oMin/2)*Math.PI/180;
var oMinvalue = ( -90 + oMin*6 )*Math.PI/180;
var oSenvalue = ( -90 + oSen*6)*Math.PI/180; ogc.beginPath();
for(var i = 0; i < 60; i++)
{
ogc.moveTo(x,y);
ogc.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
ogc.stroke();
} ogc.closePath(); ogc.beginPath();
ogc.fillStyle = 'white';
ogc.moveTo(x,y);
ogc.arc(x,y,r*19/20,0,360,false);
ogc.fill(); ogc.closePath(); ogc.beginPath();
ogc.lineWidth = 3
for(var i = 0; i < 12; i++)
{
ogc.moveTo(x,y);
ogc.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
ogc.stroke();
} ogc.closePath(); ogc.beginPath();
ogc.fillStyle = 'white';
ogc.moveTo(x,y);
ogc.arc(x,y,r*18/20,0,360,false);
ogc.fill(); ogc.closePath(); ogc.beginPath();
ogc.lineWidth = 5
ogc.moveTo(x,y);
ogc.arc(x,y,r*5/20,oHoursevalue,oHoursevalue,false);
ogc.stroke();
ogc.closePath(); ogc.beginPath();
ogc.lineWidth = 3
ogc.moveTo(x,y);
ogc.arc(x,y,r*8/20,oMinvalue,oMinvalue,false);
ogc.stroke();
ogc.closePath(); ogc.beginPath();
ogc.lineWidth = 1
ogc.moveTo(x,y);
ogc.arc(x,y,r*18/20,oSenvalue,oSenvalue,false);
ogc.stroke();
ogc.closePath(); } toDraw(); setInterval(toDraw,1000); }
</script>
</head> <body> <canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
html5 canvas 钟表的更多相关文章
- js实现一个简单钟表动画(javascript+html5 canvas)
第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...
- HTML5 Canvas 绘制二十四字真言钟表
代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...
- HTML5 Canvas 画钟表
画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...
- html5 canvas时钟
基础知识点: canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上 ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- 赠书:HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- html5 canvas常用api总结(一)
1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...
- HTML5 Canvas绘制转盘抽奖
新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...
随机推荐
- urllib.request ProxyHandler
import urllib.request proxy_support = urllib.request.ProxyHandler({}) opener = urllib.request.build_ ...
- android测试常用的命令介绍
- c#开源Excel操作库--NPOI
前言 以前也用C#操作过excel,用的是OleDb或者offic的com组件,但是总是非常的麻烦,依赖限制较多,所以果断寻找开源方案,JAVA上面已经有非常成熟的POI,就这样,找到了移.Net的移 ...
- WP7 MD5加密
WP7不支持MD5加密,在网上找了一个实现MD5加密的算法. //Copyright (c) Microsoft Corporation. All rights reserved. using Sys ...
- zoj 3822 Domination (概率dp 天数期望)
题目链接 参考博客:http://blog.csdn.net/napoleon_acm/article/details/40020297 题意:给定n*m的空棋盘 每一次在上面选择一个空的位置放置一枚 ...
- Android 第三方应用接入微信平台(2)
微信平台开放后倒是挺火的,许多第三方应用都想试下,毕竟可以利用微信 建立起来的关系链来拓展自己的应用还是挺不错的,可以节约很多在社交方 面的开销,我最近由于实习需要也在研究这个东西,不过发现网上的相关 ...
- HDU 2062 Subset sequence
我是把它当做一道数学题来做的. 这篇题解写的有点啰嗦,但是是我最原始的思维过程. 对于一个集合An= { 1, 2, …, n },在n比较小的情况下,在纸上按字典顺序把所有子集排列一下. 以n=3, ...
- 51nod1295 XOR key
第一次写可持久化trie指针版我... //Null 的正确姿势终于学会啦qaq... #include<cstdio> #include<cstring> #include& ...
- 漫游Kafka实战篇之搭建Kafka运行环境
接下来一步一步搭建Kafka运行环境. Step 1: 下载Kafka 点击下载最新的版本并解压. > tar -xzf kafka_2.9.2-0.8.1.1.tgz > cd kafk ...
- UVA 11374 Halum (差分约束系统,最短路)
题意:给定一个带权有向图,每次你可以选择一个结点v 和整数d ,把所有以v为终点的边权值减少d,把所有以v为起点的边权值增加d,最后要让所有的边权值为正,且尽量大.若无解,输出结果.若可无限大,输出结 ...