canvas ---个性时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<style>
*{
padding:;
margin:;
}
html,body{
width:%;
height:%;
overflow: hidden;
background: #;
}
canvas{
background:#fff;
}
span{
font-size: 50px;
}
</style>
<script>
function d2a(n){
n-=;
return n*Math.PI/;
}
window.onload=function(){
var c=document.getElementsByTagName('canvas')[];
var str='时钟';
//准备画笔
var gd=c.getContext('2d');
gd.lineWidth=; function drawArc(start,end,r,color){
gd.beginPath();
gd.strokeStyle=color;
gd.arc(,,r,d2a(start),d2a(end),false);
gd.stroke();
}
function clock(){
gd.clearRect(,,c.width,c.height)
var oDate=new Date();
var h=oDate.getHours();
var m=oDate.getMinutes();
var s=oDate.getSeconds();
var ms=oDate.getMilliseconds();
//秒
drawArc(,s*+ms/*,,'red');
//分
drawArc(,m*,,'blue');
//时
drawArc(,h%*,,'green');
//画字
gd.font='50px a';
gd.textAlign='center';
gd.textBaseline='bottom';
gd.fillText(str,,); gd.font='20px a';
gd.fillText(h+':'+m+':'+s,,);
} setInterval(clock,)
clock();
};
</script>
</head>
<body>
<canvas width="" height="">
<span>你的浏览器不支持canvas</span>
</canvas>
</body>
</html>
canvas ---个性时钟的更多相关文章
- [JS,Canvas]日历时钟
[JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
- 使用canvas绘制时钟
使用canvas绘制时钟 什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
- HTML5 之Canvas 绘制时钟 Demo
<!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...
- canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- [ZZ+CH] Html5 canvas+js 时钟
总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...
- canvas粒子时钟
前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 ...
- canvas画时钟,重拾乐趣!
canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...
- HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...
- 用canvas绘制时钟
用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id=& ...
随机推荐
- github提交代码流程:
(1) 检查一遍代码改动 $git status (2) 将工作目录中的代码提交到暂存区 $ git add filename git add -A (3) 提交代码到本 ...
- Maven Test
Failures表示要测试的结果与预期值不一致:Errors表示测试代码或产品代码发生了未预期的错误:Skipped表示那些被标记为忽略的测试方法.在Junit中用户可以使用@Ignore注解标记忽略 ...
- LayaAir引擎——(二)
LayaAir引擎 -> 工具 -> 图集打包例子
- flv转mp4选项设置
使用格式工厂将flv转换为mp4视频后,播放视频正常,但使用web播放器播放时就只有声音没有影像,其实只有设置好视频编码就不会出现这种情况了:
- Linux搭建SVN服务器
1 安装SVN 官网下载:http://subversion.apache.org/packages.html SVN客户端:TortoiseSVN,官网下载:http://tortoisesvn.n ...
- UIkit折腾
镜像命令: sudo npm install --registry=http://registry.npm.taobao.org/ --disturl=https://npm.taobao.org/d ...
- 关于 Record & TList 的一点吐槽
需求是把record 保存在TList中,并可以随时改变TList中Items的各项值. 代码很简单: MyRec = record MyStr: string; constructor Create ...
- C#连接数据库SQL,并转换成list形式
web config 配置 <connectionStrings> <add name="SQLConnString" connectionString=& ...
- mysql 完整性约束
mysql 完整性约束 数据的完整性概述根据完整性实施的方法将完整性约束分为四类:1.实体完整性 实体完整性的实现:通过在表中设置主键约束.唯一约束或标识列来实现 主键约束:应用于表列的一个约束 用法 ...
- java异常知识点整理
异常处理机制:捕获异常(try-catch-finally)和声明抛弃异常(throw); 所有的异常类都直接或者间接地继承于Throwable类: java异常分为可查异常和不可查异常两种.可查异常 ...