canvas：动态时钟

此时针是以画布的中心为圆心；

ctx.translate(width/2,width/2);

此函数是将画布的原点移到(width/2,width/2)

数字的位置我们利用了三角函数的原理

x=rcosα；

y=rsinα；

α = 2 * π * i * 30 / 360；

利用取余把12,3,6,9的样式改变

var arr = [3,4,5,6,7,8,9,10,11,12,1,2];

var x=0,

    y=0;

var rad = 0;

for (var i=0;i<arr.length;i++) {

    rad = 2*Math.PI*i*30/360;

    x=Math.cos(rad)*(r-30);

    y=Math.sin(rad)*(r-30);

    if (i%3==0) {

        ctx.font = "20px 微软雅黑"

        ctx.fillStyle = "black"

    }else{

        ctx.font = "16px 微软雅黑"

        ctx.fillStyle = "#CCCCCC"

    }

    ctx.textAlign = "center";

    ctx.textBaseline = "middle";

    ctx.fillText(arr[i],x,y);

}

然后是表盘的秒针刻度

和表盘数字大同小异。

一定要加beginPath，免得被其他函数影响，在这里不加，所有点会连在一起

for (var j=0;j<60;j++) {

    ctx.beginPath();

    rad = 2*Math.PI*j*6/360;

    x=Math.cos(rad)*(r-15);

    y=Math.sin(rad)*(r-15);

    ctx.lineWidth = "1";

    if (j%5==0) {

        ctx.fillStyle = "black"

    }else{

        ctx.fillStyle = "#CCCCCC"

    }

    ctx.arc(x,y,2,0,2*Math.PI,false);

    ctx.fill();

}

时针

save和restore必不可少，在这两个函数之间，改变位置不会影响到其他函数，在此段代码中特指rotate，如果没有rotate，可以不用save和restore

一定要加beginPath，免得被其他函数影响

时针和分针秒针不一样，一个30°，还有分针的移动会影响时针的位置

时针运动的原理是画好一条线，然后旋转那条线

function drawHours(h,m){

    ctx.save()

    ctx.beginPath();

    var rad = 2*Math.PI*(h*30+m/2)/360;

    ctx.rotate(rad);

    ctx.lineWidth = "8"

    ctx.strokeStyle = "black"

    ctx.lineCap = "round";

    ctx.moveTo(0,15);

    ctx.lineTo(0,-r+100);

    ctx.stroke();

    ctx.restore();

}

分针

function drawMinutes(m){

    ctx.save()

    ctx.beginPath();

    var rad = 2*Math.PI*m/60;

    ctx.rotate(rad);

    ctx.lineWidth = "6"

    ctx.strokeStyle = "black"

    ctx.lineCap = "round";

    ctx.moveTo(0,20);

    ctx.lineTo(0,-r+80);

    ctx.stroke();

    ctx.restore();

}

秒针

function drawSecond(s){

    ctx.save()

    ctx.beginPath();

    var rad = 2*Math.PI*s/60;

    ctx.rotate(rad);

    ctx.lineWidth = "5"

    ctx.strokeStyle = "red"

    ctx.moveTo(0,30);

    ctx.lineTo(0,-r+40);

    ctx.stroke();

    ctx.restore();

}

点

function drawdot(){

    ctx.beginPath();

    ctx.fillStyle = "honeydew"

    ctx.arc(0,0,4,0,2*Math.PI,false);

    ctx.fill();

}

还添加了线性渐变，

var grd = ctx.createLinearGradient(-250,-250,250,250)

var r1 = Math.floor(Math.random()*256);
var g1 = Math.floor(Math.random()*256);
var b1 = Math.floor(Math.random()*256);
var r2 = Math.floor(Math.random()*256);
var g2 = Math.floor(Math.random()*256);
var b2 = Math.floor(Math.random()*256);
grd.addColorStop(0,"rgb(" + r1 + "," + g1 + "," + b1 + ")");
grd.addColorStop(1,"rgb(" + r2 + "," + g2 + "," + b2 + ")");

相当于添加一个调色容纳器

ctx.strokeStyle = grd;

然后赋值给strokestyle

下面附上整段代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
canvas{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="" width="500" height="500"></canvas>
<script type="text/javascript">
var ocanvas = document.getElementsByTagName("canvas")[0];
var ctx = ocanvas.getContext("2d");
var width = ocanvas.width;
var height = ocanvas.height;
var r = width/2;
ctx.translate(width/2,width/2);
var grd = ctx.createLinearGradient(-250,-250,250,250)

var timer = setInterval(function(){
ctx.clearRect(-250,-250,500,500);
setTime();
},1000)
function setTime(){
var timet = new Date();
var h = timet.getHours();
var m = timet.getMinutes();
var s = timet.getSeconds();

ctx.beginPath();
ctx.lineWidth = "10"
ctx.arc(0,0,width/2-5,0,2*Math.PI,false);
var r1 = Math.floor(Math.random()*256);
var g1 = Math.floor(Math.random()*256);
var b1 = Math.floor(Math.random()*256);
var r2 = Math.floor(Math.random()*256);
var g2 = Math.floor(Math.random()*256);
var b2 = Math.floor(Math.random()*256);
grd.addColorStop(0,"rgb(" + r1 + "," + g1 + "," + b1 + ")");
grd.addColorStop(1,"rgb(" + r2 + "," + g2 + "," + b2 + ")");
ctx.strokeStyle = grd;
ctx.stroke();

var arr = [3,4,5,6,7,8,9,10,11,12,1,2];
var x=0,
y=0;
var rad = 0;

for (var i=0;i<arr.length;i++) {
rad = 2*Math.PI*i*30/360;
x=Math.cos(rad)*(r-30);
y=Math.sin(rad)*(r-30);
if (i%3==0) {
ctx.font = "20px 微软雅黑"
ctx.fillStyle = "black"
}else{
ctx.font = "16px 微软雅黑"
ctx.fillStyle = "#CCCCCC"
}
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(arr[i],x,y);
}

for (var j=0;j<60;j++) {
ctx.beginPath();
rad = 2*Math.PI*j*6/360;
x=Math.cos(rad)*(r-15);
y=Math.sin(rad)*(r-15);
ctx.lineWidth = "1";
if (j%5==0) {
ctx.fillStyle = "black"
}else{
ctx.fillStyle = "#CCCCCC"
}

ctx.arc(x,y,2,0,2*Math.PI,false);
ctx.fill();
}
drawHours(h,m);
drawMinutes(m);
drawSecond(s);
drawdot();
}
function drawHours(h,m){
ctx.save()
ctx.beginPath();
var rad = 2*Math.PI*(h*30+m/2)/360;
ctx.rotate(rad);
ctx.lineWidth = "8"
ctx.strokeStyle = "black"
ctx.lineCap = "round";
ctx.moveTo(0,15);
ctx.lineTo(0,-r+100);
ctx.stroke();
ctx.restore();
}
function drawMinutes(m){
ctx.save()
ctx.beginPath();
var rad = 2*Math.PI*m/60;
ctx.rotate(rad);
ctx.lineWidth = "6"
ctx.strokeStyle = "black"
ctx.lineCap = "round";
ctx.moveTo(0,20);
ctx.lineTo(0,-r+80);
ctx.stroke();
ctx.restore();
}
function drawSecond(s){
ctx.save()
ctx.beginPath();
var rad = 2*Math.PI*s/60;
ctx.rotate(rad);
ctx.lineWidth = "5"
ctx.strokeStyle = "red"
ctx.moveTo(0,30);
ctx.lineTo(0,-r+40);
ctx.stroke();
ctx.restore();
}
function drawdot(){
ctx.beginPath();
ctx.fillStyle = "honeydew"
ctx.arc(0,0,4,0,2*Math.PI,false);
ctx.fill();
}
</script>
</body>
</html>

效果如下：

canvas：动态时钟的更多相关文章

环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）
缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...
canvas ：原生javascript编写动态时钟
canvas :原生javascript编写动态时钟此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...
[JS,Canvas]日历时钟
[JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
linux动态时钟探索
在早期的linux内核版本的时间概念都是由周期时钟提供的.虽然比较有效,但是,对于关注能耗电量的系统上,就不能满足长时间休眠的需求,因为周期系统要求必须在一定的频率下,周期性的处于活动状态.因此,li ...
使用canvas绘制时钟
使用canvas绘制时钟什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
HTML5 之Canvas 绘制时钟 Demo
<!DOCTYPE html> <html> <head> <title>Canvas 之时钟 Demo</title> <!--简 ...
js 动态时钟
js 动态时钟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
使用Timer类的两个实例动态时钟
package chapter16; import javax.swing.*; import chapter15.StillClock; import java.awt.event.*; publi ...
canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
[ZZ+CH] Html5 canvas+js 时钟
总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

随机推荐

iBatis框架使用 4步曲
iBatis是一款使用方便的数据訪问工具,也可作为数据持久层的框架.和ORM框架(如Hibernate)将数据库表直接映射为Java对象相比.iBatis是将SQL语句映射为Java对象. 相对于全自 ...
JAVA并发-为现有的线程安全类添加原子方法
JAVA中有许多线程安全的基础模块类,一般情况下,这些基础模块类能满足我们需要的所有操作,但更多时候,他们并不能满足我们所有的需要.此时,我们需要想办法在不破坏已有的线程安全类的基础上添加一个新的原子 ...
Exception: Operation xx of contract xx specifies multiple request body parameters to be serialized without any wrapper elements.
Operation 'CreateProductCodeStock' of contract 'IChileService' specifies multiple request body param ...
django 笔记4 数据库操作
django操作数据库 orm操作对应关系 models.tb.objects.filter(id__gt=) models.tb.objects.filter(id=) models.tb.obj ...
如何组织CSS？
前端工程师在开发一个单页面或者小网站的时候有可能不会在意CSS的组织问题,但如果要开发一个中大型的网站,就要好好的组织CSS文件,不然会增加维护成本,整个网站的结构也没条理性. 如何组织CSS?一般常 ...
FreeBSD是UNIX系统的重要分支，其命令与Linux大部分通用，少部分是其特有。
FreeBSD是UNIX系统的重要分支,其命令与Linux大部分通用,少部分是其特有. 1: man 在线查询 man ls2: ls 查看目录与档案 ls -la3: ln 建立链接文件 ln -f ...
javaScript 预编译过程浅尝
javaScript 预编译过程 1.创建AO对象(Activation Object) AO{ a: } 2.找形参和变量声明,将变量和形参作为AO属性名,值为undefined AO{ a:und ...
RvmTranslator6.0
RvmTranslator6.0 eryar@163.com 1. Introduction RvmTranslator can translate the RVM file exported by ...
ajax ---- json 和 xml 区别
2.XML和JSON优缺点 (1).XML的优缺点<1>.XML的优点 A.格式统一,符合标准: B.容易与其他系统进行远程交互,数据共享比较方便.<2>.XML的缺点 A.X ...
deep-in-es6(七)
Symbols对象 JavaScript的第七种原始类型以前的数据类型: Undefined 未定义 Null 空值 Boolean 布尔类型 Number 数字类型 String 字符串类型 Ob ...

canvas：动态时钟

canvas：动态时钟的更多相关文章

随机推荐

热门专题