canvas 画钟表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background: #000;
}
#c1 {
background: #fff;
margin: 0 auto;
position: absolute;
left: 50%;
margin-left: -200px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oC = document.getElementById('c1');
var oGc = oC.getContext('2d');
// alert(oGc)
function toDraw() {
var x = 200;
var y = 200;
//中心点
var r = 150;
//半径
oGc.clearRect(0, 0, oC.width, oC.height)
// 获取时间
var oDate = new Date();
var oHoure = oDate.getHours();
var oMin = oDate.getMinutes();
var oSon = oDate.getSeconds();
//时针对应的弧度
var oHoureValue = (-90 + oHoure * 30 + oMin / 2) * Math.PI / 180;
//分针对应的弧度
var oMinValue = (-90 + oMin * 6) * Math.PI / 180;
//秒针对应的弧度
var oSonValue = (-90 + oSon * 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.closePath();
oGc.stroke();
//画白色的覆盖
oGc.fillStyle = "white";
oGc.beginPath();
oGc.moveTo(x, y);
oGc.arc(x, y, r * 19 / 20, 0, 360 * Math.PI / 180, false)
oGc.closePath();
oGc.fill();
oGc.lineWidth = 3;
oGc.beginPath();
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.closePath();
oGc.stroke();
//画白色的覆盖
oGc.fillStyle = "white";
oGc.beginPath();
oGc.moveTo(x, y);
oGc.arc(x, y, r * 18 / 20, 0, 360 * Math.PI / 180, false)
oGc.closePath();
oGc.fill();
//时针
oGc.lineWidth = 5;
//分割单独的区间
oGc.beginPath();
oGc.moveTo(x, y);
oGc.arc(x, y, r * 10 / 20, oHoureValue, oHoureValue, false)
oGc.closePath();
oGc.stroke();
//分针
oGc.lineWidth = 3;
oGc.beginPath();
oGc.moveTo(x, y);
oGc.arc(x, y, r * 14 / 20, oMinValue, oMinValue, false)
oGc.closePath();
oGc.stroke();
//秒针
oGc.lineWidth = 2;
oGc.beginPath();
oGc.moveTo(x, y);
oGc.arc(x, y, r * 19 / 20, oSonValue, oSonValue, false)
oGc.closePath();
oGc.stroke();
}
setInterval(toDraw, 1000)
toDraw();
}
</script>
</head>
<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
问题：在实现 时针 分针 秒针都需要分离单独的空间 ,在开启定时器时注意要清空画布（"会累加"），注意角度 ，弧度之间的转化
canvas 画钟表的更多相关文章
- HTML5 Canvas 画钟表
画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...
- canvas画画板,canvas画五角星，canvas制作钟表、Konva写钟表
制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...
- 基础canvas应用-钟表绘制
首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...
- Canvas基础——钟表绘制
首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...
- 使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
- canvas 画圈 demo
html代码: <canvas id="clickCanvas2" width="180" height="180" data-to ...
- 踩个猴尾不容易啊 Canvas画个猴子
踩个猴尾不容易啊 Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- canvas画随机闪烁的星星
canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...
- canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
随机推荐
- 初学strurs基础
Struts2基础学习总结 Struts 2是在WebWork2基础发展而来的. 注意:struts 2和struts 1在代码风格上几乎不一样. Struts 2 相比Struts 1的优点: 1. ...
- CSAcademy Beta Round #5 Long Journey
题目链接:https://csacademy.com/contest/arhiva/#task/long_journey/ 大意是有一张无向不带权的图,两个人同时从s点出发,分别前往a点和b点,且每个 ...
- time模块简介
Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能. Python 提供了一个 time 和 calendar 模块可以用于格式化日期和时间. 时间间隔是以秒为单位的浮点小数. ...
- 阿里云centos 安装和配置 DokuWiki
安装 1) 添加虚拟主机:由于我的 阿里云CentOs服务器 安装了oneinstack的一键部署PHP.JAVA.Nginx等环境,所以域名配置很方便,照着文档一步一步做就可以了 cd /root/ ...
- Struts2框架的基本使用（二）
上一篇 Struts2框架的基本使用 我们限于篇幅,最后简单介绍了Action的配置问题,本篇接着介绍有关框架的一些其他基本用法,主要内容如下: Action的基本配置 result的基本配置 Str ...
- Yii2框架---GII自动生成
本地环境配置完成后.访问路径直接加上/gii 例如 localhost/gii 即可生成YII活动记录类 即可生成模块
- MySQL注入与防御（排版清晰内容有条理）
为何我要在题目中明确排版清晰以及内容有条理呢? 因为我在搜相关SQL注入的随笔博客的时候,看到好多好多都是页面超级混乱的.亲爱的园友们,日后不管写博客文章还是平时写的各类文章也要多个心眼,好好注意一下 ...
- .NET Core 2.0体验
.NET Core 2.0预览版及.NET Standard 2.0 Preview 这个月也就要发布了. 具体相关信息可以查看之前的文章.NET Core 2.0及.NET Standard 2.0 ...
- unity还原three导出的json——基本模型，位移，旋转，缩放
GameObject.CreatePrimitive(PrimitiveType.Cube); GameObject.CreatePrimitive(PrimitiveType.Plane); Gam ...
- hdu 1254 推箱子（搜索）
我写的第一道感觉比较难的搜索 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1254 首先要推箱子的话要满足人能够在箱子旁边,而且人的对面也是可通的. ...