canvas画一个时钟

/**

* 分针速率根据秒针来，时针速率根据分针来

* */

function Clock (params, dom) {

let R = 50,

LINE_WIDTH = 3,

X_CENTER = 200,

Y_CENTER = 200,

canvas = dom;

this.setR = function (r) {

this.R = r;

}

this.setXCenter = function (x) {

this.X_CENTER = x;

}

this.setYCenter = function (y) {

this.Y_CENTER = y;

}

this.getXCenter = function () {

return this.X_CENTER;

}

this.getYCenter = function () {

return this.Y_CENTER;

}

this.getR = function () {

return this.R;

}

this.getDomElement = function() {

return canvas;

}

// this.setCanvas = function (c) {

// return this.canvas = c

// }

this.setXCenter(params.x);

this.setYCenter(params.y);

this.setR(params.r);

}

Clock.prototype = {

constructor: Clock,

init: function () {

var ctx = this.getDomElement().getContext('2d')

// var s = 0;

setInterval(() => {

var x = this.getXCenter();

var y = this.getYCenter();

var r = this.getR();

ctx.clearRect(x - r - 2, y - r - 2, 2 * r + 5, 2 * r + 5);

var s = new Date().getSeconds();

var m = new Date().getMinutes();

var h = new Date().getHours();

// if (s === 60) {

// s = 0;

// }

this.drawClock(ctx);

this.drawCenter(ctx);

this.drawSecond(ctx, s);

this.drawMin(ctx, m, s);

this.drawHour(ctx, h, m);

// s += 1;

},1000);

drawCenter: function (ctx) {

var x = this.getXCenter();

var y = this.getYCenter();

var r = this.getR();

ctx.beginPath();

ctx.fillStyle = '#3f51b5';

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

ctx.stroke();

ctx.fill();

ctx.beginPath();

ctx.fillStyle = '#ffffff';

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

ctx.stroke();

ctx.fill();

drawClock: function (ctx) {

var x = this.getXCenter();

var y = this.getYCenter();

var r = this.getR();

ctx.beginPath();

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

ctx.stroke();

// 画刻度

for (let i = 0; i < 60; i += 1) {

ctx.beginPath();

ctx.font = `15px Microsoft Yahei`;

ctx.fillStyle = '#1d89d5';

ctx.textAlign = 'center';

if (0 <= i && i <=15) {

if (i % 5 !== 0) {

var xPointS = x + (r * Math.cos((Math.PI / 2) - (Math.PI / 30 * i)));

var yPointS = y - (r * Math.sin((Math.PI / 2) - (Math.PI / 30 * i)));

var xPointE = x + (r * 0.9 * Math.cos((Math.PI / 2) - (Math.PI / 30 * i)));

var yPointE = y - (r * 0.9 * Math.sin((Math.PI / 2) - (Math.PI / 30 * i)))

ctx.moveTo(xPointS, yPointS);

ctx.lineTo(xPointE, yPointE);

} else {

// 长刻度

var xPointS = x + (r * Math.cos((Math.PI / 2) - (Math.PI / 30 * i)));

var yPointS = y - (r * Math.sin((Math.PI / 2) - (Math.PI / 30 * i)));

var xPointE = x + (r * 0.8 * Math.cos((Math.PI / 2) - (Math.PI / 30 * i)));

var yPointE = y - (r * 0.8 * Math.sin((Math.PI / 2) - (Math.PI / 30 * i)))

ctx.moveTo(xPointS, yPointS);

ctx.lineTo(xPointE, yPointE);

if (i === 0) {

// 写字

ctx.fillText('12', xPointE, yPointE + 13);

} else if (i === 5) {

// 写字

ctx.fillText('1', xPointE, yPointE + 13);

} else if (i === 10) {

// 写字

ctx.fillText('2', xPointE - 5, yPointE + 5);

} else if (i === 15) {

// 写字

ctx.fillText('3', xPointE - 5, yPointE + 5);

}

} else if (15 < i && i <= 30) {

if (i % 5 !== 0) {

var xPointS = x + (r * Math.cos(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))));

var yPointS = y + (r * Math.sin(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))));

var xPointE = x + (r * 0.9 * Math.cos(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))));

var yPointE = y + (r * 0.9 * Math.sin(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))))

ctx.moveTo(xPointS, yPointS);

ctx.lineTo(xPointE, yPointE);

} else {

// 长刻度

var xPointS = x + (r * Math.cos(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))));

var yPointS = y + (r * Math.sin(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))));

var xPointE = x + (r * 0.8 * Math.cos(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))));

var yPointE = y + (r * 0.8 * Math.sin(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))));

ctx.moveTo(xPointS, yPointS);

ctx.lineTo(xPointE, yPointE);

if (i === 20) {

// 写字

ctx.fillText('4', xPointE - 5, yPointE);

} else if (i === 25) {

// 写字

ctx.fillText('5', xPointE - 5, yPointE);

} else if (i === 30) {

// 写字

ctx.fillText('6', xPointE, yPointE - 5);

}

} else if (30 < i && i < 45) {

if (i % 5 !== 0) {

var xPointS = x - (r * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

var yPointS = y + (r * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

var xPointE = x - (r * 0.9 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

var yPointE = y + (r * 0.9 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))))

ctx.moveTo(xPointS, yPointS);

ctx.lineTo(xPointE, yPointE);

} else {

// 长刻度

var xPointS = x - (r * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

var yPointS = y + (r * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

var xPointE = x - (r * 0.8 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

var yPointE = y + (r * 0.8 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

ctx.moveTo(xPointS, yPointS);

ctx.lineTo(xPointE, yPointE);

if (i === 35) {

// 写字

ctx.fillText('7', xPointE + 5, yPointE);

} else if (i === 40) {

// 写字

ctx.fillText('8', xPointE + 5, yPointE + 5);

}

} else if (45 <= i && i < 60){

if (i % 5 !== 0) {

var xPointS = x - (r * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

var yPointS = y - (r * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

var xPointE = x - (r * 0.9 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

var yPointE = y - (r * 0.9 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))))

ctx.moveTo(xPointS, yPointS);

ctx.lineTo(xPointE, yPointE);

} else {

// 长刻度

var xPointS = x - (r * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

var yPointS = y - (r * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

var xPointE = x - (r * 0.8 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

var yPointE = y - (r * 0.8 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

ctx.moveTo(xPointS, yPointS);

ctx.lineTo(xPointE, yPointE);

if (i === 45) {

// 写字

ctx.fillText('9', xPointE + 5, yPointE + 3);

} else if (i === 50) {

// 写字

ctx.fillText('10', xPointE + 8, yPointE + 5);

} else if (i === 55) {

// 写字

ctx.fillText('11', xPointE + 3, yPointE + 13);

}

ctx.stroke();

}

drawSecond: function (ctx, s) {

var x = this.getXCenter();

var y = this.getYCenter();

var r = this.getR();

ctx.beginPath();

ctx.moveTo(x,y);

var i = s

if (0 <= i && i <=15) {

// 第一现象线

var xPointE = x + (r * 0.9 * Math.cos((Math.PI / 2) - (Math.PI / 30 * i)));

var yPointE = y - (r * 0.9 * Math.sin((Math.PI / 2) - (Math.PI / 30 * i)))

ctx.lineTo(xPointE, yPointE);

} else if (15 < i && i <= 30) {

// 第四象限

var xPointE = x + (r * 0.9 * Math.cos(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))));

var yPointE = y + (r * 0.9 * Math.sin(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))))

ctx.lineTo(xPointE, yPointE);

} else if (30 < i && i < 45) {

// 第三象限

var xPointE = x - (r * 0.9 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

var yPointE = y + (r * 0.9 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))))

ctx.lineTo(xPointE, yPointE);

} else if (45 <= i && i < 60){

// 第二象限

var xPointE = x - (r * 0.9 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

var yPointE = y - (r * 0.9 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))))

ctx.lineTo(xPointE, yPointE);

}

ctx.stroke();

drawMin: function (ctx, m, s) {

var x = this.getXCenter();

var y = this.getYCenter();

var r = this.getR();

ctx.beginPath();

ctx.moveTo(x,y);

var i = m

if (0 <= i && i <=15) {

// 第一象限

var xPointE = x + (r * 0.8 * Math.cos((Math.PI / 2) - (Math.PI / 30 * s / 60) - (Math.PI / 30 * i)));

var yPointE = y - (r * 0.8 * Math.sin((Math.PI / 2) - (Math.PI / 30 * s / 60) - (Math.PI / 30 * i)));

ctx.lineTo(xPointE, yPointE);

} else if (15 < i && i <= 30) {

// 第四象限

var xPointE = x + (r * 0.8 * Math.cos(Math.abs((Math.PI / 2) - (Math.PI / 30 * s / 60) -(Math.PI / 30 * i))));

var yPointE = y + (r * 0.8 * Math.sin(Math.abs((Math.PI / 2) - (Math.PI / 30 * s / 60) - (Math.PI / 30 * i))));

ctx.lineTo(xPointE, yPointE);

} else if (30 < i && i < 45) {

// 第三象限

var xPointE = x - (r * 0.8 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * s / 60) - (Math.PI / 30 * i))));

var yPointE = y + (r * 0.8 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * s / 60) - (Math.PI / 30 * i))));

ctx.lineTo(xPointE, yPointE);

} else if (45 <= i && i < 60){

// 第二象限

var xPointE = x - (r * 0.8 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * s / 60) - (Math.PI / 30 * i))));

var yPointE = y - (r * 0.8 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * s / 60) - (Math.PI / 30 * i))));

ctx.lineTo(xPointE, yPointE);

}

ctx.stroke();

drawHour: function (ctx, h, m) {

var x = this.getXCenter();

var y = this.getYCenter();

var r = this.getR();

ctx.beginPath();

ctx.moveTo(x,y);

var i = h

if ((0 <= i && i <= 3) || (12 <= i && i <= 15)) {

i = i >= 12 ? i - 12 : i;

// 第一现象线

var xPointE = x + (r * 0.65 * Math.cos((Math.PI / 2) - (Math.PI / 6 * i) - (Math.PI / 6 * m / 60)));

var yPointE = y - (r * 0.65 * Math.sin((Math.PI / 2) - (Math.PI / 6 * i) - (Math.PI / 6 * m / 60)));

ctx.lineTo(xPointE, yPointE);

} else if ((15 < i && i <= 18) || (3 < i && i <= 6)) {

i = i >= 12 ? i - 12 : i;

// 第四象限

var xPointE = x + (r * 0.65 * Math.cos(Math.abs((Math.PI / 2) - (Math.PI / 6 * i) - (Math.PI / 6 * m / 60))));

var yPointE = y + (r * 0.65 * Math.sin(Math.abs((Math.PI / 2) - (Math.PI / 6 * i) - (Math.PI / 6 * m / 60))));

ctx.lineTo(xPointE, yPointE);

} else if ((18 < i && i < 21) || (6 < i && i < 9)) {

i = i >= 12 ? i - 12 : i;

// 第三象限

var xPointE = x - (r * 0.65 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 6 * i) - (Math.PI / 6 * m / 60))));

var yPointE = y + (r * 0.65 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 6 * i) - (Math.PI / 6 * m / 60))));

ctx.lineTo(xPointE, yPointE);

} else if ((21 <= i && i <= 23) || (9 <= i && i <= 11)){

i = i >= 12 ? i - 12 : i;

// 第二象限

var xPointE = x - (r * 0.65 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 6 * i) - (Math.PI / 6 * m / 60))));

var yPointE = y - (r * 0.65 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 6 * i) - (Math.PI / 6 * m / 60))));

ctx.lineTo(xPointE, yPointE);

}

ctx.stroke();

}

var canvas = document.getElementById('x');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

var c = new Clock({ x: 400, y: 400, r: 200 },canvas);

c.init();

最后编辑于：2019.10.17 18:12:01

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,294评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,493评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,790评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,595评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,718评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,906评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,053评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,797评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,250评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,570评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,711评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,388评论 4赞 332
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,018评论 3赞 316
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,796评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,023评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,461评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,595评论 2赞 350

canvas画一个时钟

推荐阅读更多精彩内容