canvas绘制表盘时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas绘制表盘</title>
</head>
<body>
<canvas id='box' width="500" height="500" >
您的浏览器不支持canvas
</canvas>
<script>
var box = document.getElementById('box');
var cxt = box.getContext('2d');
// 时钟动起来
var timer = null;
function clock(){
var date = new Date();
var s = date.getSeconds();
var m = date.getMinutes()+s/60;
var h = date.getHours()+m/60;
h = h>12? h-12:h;
// 清画布
cxt.clearRect(0,0,500,500);
// 画表盘
cxt.strokeStyle = '#f0f';
cxt.lineWidth = 6;
cxt.beginPath();
cxt.arc(250,250,100,0,2*Math.PI);
cxt.stroke();
// 画时钟刻度
for(var i=0; i<12; i++){
cxt.save();
cxt.translate(250,250);
cxt.rotate(30*i*Math.PI/180);
cxt.lineWidth = 3;
cxt.beginPath();
cxt.moveTo(0,-80);
cxt.lineTo(0,-92);
cxt.stroke();
cxt.restore();
}
//画分钟刻度
for(var i=0; i<60; i++){
cxt.save();
cxt.translate(250,250);
cxt.rotate(6*i*Math.PI/180);
cxt.lineWidth = 2;
cxt.beginPath();
cxt.moveTo(0,-86);
cxt.lineTo(0,-92);
cxt.stroke();
cxt.restore();
}
// 画时针
cxt.save();
cxt.lineWidth = 5;
cxt.translate(250,250);
cxt.rotate(h*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,6);
cxt.lineTo(0,-40);
cxt.stroke();
cxt.restore();
// 画分针
cxt.save();
cxt.lineWidth = 3;
cxt.translate(250,250);
cxt.rotate(m*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,8);
cxt.lineTo(0,-60);
cxt.stroke();
cxt.restore();
// 画秒针
cxt.save();
cxt.lineWidth = 1;
cxt.translate(250,250);
cxt.rotate(s*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,10);
cxt.lineTo(0,-75);
cxt.stroke();
cxt.restore();
// 画中心的小圆固定三根针
cxt.save();
cxt.beginPath();
cxt.fillStyle = '#0f0';
cxt.lineWidth = 2;
cxt.translate(250,250);
cxt.arc(0,0,2,0,360,false);
cxt.stroke();
cxt.fill();
cxt.restore();
// 画秒针上的园
cxt.save();
cxt.fillStyle = '#f00';
cxt.lineWidth = 2;
cxt.translate(250,250);
cxt.rotate(s*6*Math.PI/180);
cxt.beginPath();
cxt.arc(0,-60,2,0,360,false);
cxt.stroke();
cxt.fill();
cxt.restore();
}
clock();
timer = setInterval(clock,1000);
</script>
</body>
</html>
canvas绘制表盘时钟的更多相关文章
- 用canvas绘制一个时钟
实现一个时钟的绘制和时间的显示 一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html l ...
- 使用canvas绘制一个时钟
周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么 ...
- canvas绘制简易时钟
时钟绘制的非常简易,但该有的都有了. 效果图如下, <!DOCTYPE html> <html> <head lang="en"> <me ...
- 应用canvas绘制动态时钟--每秒自动动态更新时间
使用canvas绘制时钟 下文是部分代码,完整代码参照:https://github.com/lemoncool/canvas-clock,可直接下载. 首先看一下效果图:每隔一秒会动态更新时间 一. ...
- html5、canvas绘制本地时钟
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- Python Turtle库绘制表盘时钟
运行效果: 源代码: 1 # coding=utf-8 2 3 import turtle 4 from datetime import * 5 6 # 抬起画笔,向前运动一段距离放下 7 def S ...
- 使用canvas绘制时钟
使用canvas绘制时钟 什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
- HTML5 之Canvas 绘制时钟 Demo
<!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...
- canvas绘制时钟及注释及save和restore的用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- 吴裕雄--天生自然ORACLE数据库学习笔记:用户管理与权限分配
create user mr identified by mrsoft default tablespace users temporary tablespace temp; create user ...
- Windows驱动开发-DPC定时器
DCP是一种使用更加灵活的定时器,可以对任意间隔时间进行定时.DPC定时器的内部使用了一个定时器对象KTIMER,当你设定了定时器之后,从设定开始起经过这个时间之后操作系统会将一个DPC定时器的例程插 ...
- 认识gets&read(buffer over flow is bof)
gets不会检查输入的长度,从而有数据覆盖的风险,
- CentOS 7 启动流程
1.UEFI或BIOS初始化,运行POST开机自检 2.选择启动设备,Boot Sequence 系统启动次序一般含有:光驱.U盘.硬盘A.硬盘B.按次序查找各引导设备,第一个有引导程序的设备即为本次 ...
- 莫烦 - Pytorch学习笔记 [ 二 ] CNN ( 1 )
CNN原理和结构 观点提出 关于照片的三种观点引出了CNN的作用. 局部性:某一特征只出现在一张image的局部位置中. 相同性: 同一特征重复出现.例如鸟的羽毛. 不变性:subsampling下图 ...
- C# String 字符串一些关键理解
#1 :在.Net Framework中,字符总是表示成16位Unicode的代码#2 :String 和string 其实是一样的只是表现形式上不同#3 :string类型被视为基元类型,也就是编译 ...
- QQ企业通---登录模块设计--知识点
Rectangle 成员 存储一组整数,共四个,表示一个矩形的位置和大小.对于更高级的区域函数,请使用 Region 对象. Form与Control的区别? 窗体也是控件,继承Control类.可 ...
- phpQuery的使用
前言 为什么使用phpQuery phpQuery是基于php5新添加的DOMDocument.而DOMDocument则是专门用来处理html/xml.它提供了强大的xpath选择器及其他很多htm ...
- 【转帖】IBM发布全新闪存解决方案,助企业存储架构做减法
IBM发布全新闪存解决方案,助企业存储架构做减法 http://stor-age.zhiding.cn/stor-age/2020/0227/3124851.shtml 感觉 配图弄错了 FlashS ...
- CSS 常用操作
1.对齐 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...