导语：距离上一次写canvas，已经过去两年半，如今业务需要，再次拾起，随手记录。

【思考】 时钟的绘制主要在于圆的绘制：1. 使用context.arc()方法直接绘制圆或圆弧； 2. 使用圆的方程（x = r * cosA + X, y = r * sinA + Y）进行描点绘制。指针运行速率较慢，故使用setInterval进行刷新重绘。
【优化】可以使用两个canvas，一个用来绘制表盘，另一个绘制指针，如此，只需刷新重绘指针canvas，表盘canvas保持不变。

<!DOCTYPE html>

<html>

<head>

  <title>Canvas Clock</title>

</head>

<body>

<canvas id="clock">Your borswer does not support canvas element.</canvas>

<script type="text/javascript">

/**

 * 圆的方程：x = r * cosA + X, y = r * sinA + Y

 * 浏览器为了达到抗锯齿的效果会做额外的运算，故为提高渲染效率，均使用整数进行绘制。

 */

(function() {

    let clockCvs = document.getElementById('clock')

    if (!clockCvs || !clockCvs.getContext) return

    clockCvs.width = 310

    clockCvs.height = 310

    let clockCtx = clockCvs.getContext('2d')

    // X坐标偏移

    const X = 155

    // Y坐标偏移

    const Y = 155

    // 钟的半径

    const R = 150

    start()

    setInterval(start, 1000)

    function start () {

        clockCtx.clearRect(0, 0, clockCvs.width, clockCvs.height)

        renderClockPlate()

        renderClockTime()

        renderClockHand()

    }

    // 渲染表盘

    function renderClockPlate () {

        drawCircle(X, Y, '#070702', R, 1)

        drawCircle(X, Y, '#4f4f52', R - 3, 5)

        drawCircle(X, Y, '#070702', R - 6, 3)

        drawCircle(X, Y, '#dddddd', R - 8)

        drawCircle(X, Y, '#121213', R - 10, 3)

        drawCircle(X, Y, '#19191a', R - 12, 0, 'fill', true)

        drawCircle(X, Y, '#4e4738', 15, 0, 'fill')

        drawCircle(X, Y, '#eac55a', 10, 0, 'fill')

        drawCircle(X, Y, '#3e3e41', 8, 0, 'fill')

        drawCircle(X, Y, '#000000', 3, 0, 'fill')

    }

    // 渲染时间

    function renderClockTime () {

        for (let angle = -90; angle < 270; angle = angle + 6) {

            let x = Math.round((R - 18) * Math.cos(angle / 180 * Math.PI) + X)

            let y = Math.round((R - 18) * Math.sin(angle / 180 * Math.PI) + Y)

            let r = angle % 90 === 0 ? 4 : 2

            drawCircle(x, y, '#eac55a', r, 0, 'fill')

            if (angle % 30 === 0) {

                x = Math.round((R - 35) * Math.cos(angle / 180 * Math.PI) + X - 4)

                y = Math.round((R - 35) * Math.sin(angle / 180 * Math.PI) + Y + 6)

                clockCtx.font = angle % 90 === 0 ? 'bold 15px yahei' : '12px yahei'

                clockCtx.fillText((angle + 90) / 30 || 12, x , y)

            }

        }

    }

    // 渲染表针

    function renderClockHand () {

        let date = new Date()

        let hour = date.getHours()

        let minute = date.getMinutes()

        let second = date.getSeconds()

        // 秒针

        let angle1 = (second * 6 - 90)

        let x = Math.round((R - 45) * Math.cos(angle1 / 180 * Math.PI) + X)

        let y = Math.round((R - 45) * Math.sin(angle1 / 180 * Math.PI) + Y)

        drawLine([[X, Y], [x, y]], 1)

        // 分针

        let angle2 = (minute * 6 - 90)

        x = Math.round((R - 65) * Math.cos(angle2 / 180 * Math.PI) + X)

        y = Math.round((R - 65) * Math.sin(angle2 / 180 * Math.PI) + Y)

        drawLine([[X, Y], [x, y]], 2)

        // 时针， 时针角度 = 小时角度 + 分钟角度

        let angle3 = ((hour % 12) * 30 - 90) + (angle2 / 12)

        x = Math.round((R - 90) * Math.cos(angle3 / 180 * Math.PI) + X)

        y = Math.round((R - 90) * Math.sin(angle3 / 180 * Math.PI) + Y)

        drawLine([[X, Y], [x, y]], 4)

    }

    /**

     * @param {String} color 颜色

     * @param {Number} r 圆半径

     * @param {Number} lineWidth 线条粗细

     * @param {String} type 类型，stroke/fill

     * @param {Boolean} isLinear 是否渐变

     */

    function drawCircle (x, y,color = '#000000', r = 10, lineWidth = 2, type = 'stroke', isLinear = false) {

        let grd = clockCtx.createLinearGradient(0, 0, clockCvs.width, clockCvs.height)

        grd.addColorStop(0, color)

        grd.addColorStop(0.5, '#555555')

        grd.addColorStop(1, color)

        clockCtx[type + 'Style'] = isLinear ? grd : color

        clockCtx.lineWidth = lineWidth

        clockCtx.beginPath()

        clockCtx.arc(x, y, r, 0, Math.PI * 2, true)

        clockCtx.closePath()

        clockCtx[type]()

    }

    /**

     * @param {Array} pos 坐标点集合，如 [[0, 0], [120, 120]]

     * @param {String} color 颜色

     * @param {Number} lineWidth 线条粗细

     */

    function drawLine (pos, lineWidth = 2, color = '#eac55a') {

        clockCtx.strokeStyle = color

        clockCtx.lineWidth = lineWidth

        clockCtx.beginPath()

        clockCtx.moveTo(pos[0][0], pos[0][1])

        for (let i = 0, len = pos.length; i < len; i++) {

            clockCtx.lineTo(pos[i][0], pos[i][1])

        }

        clockCtx.stroke()

        clockCtx.closePath()

    }

})()

</script>

</body>

</html>

优化前

<!DOCTYPE html>

<html>

<head>

  <title>Canvas Clock</title>

</head>

<body>

<canvas id="clock" style="position: absolute;">Your borswer does not support canvas element.</canvas>

<canvas id="clockHand" style="position: absolute;">Your borswer does not support canvas element.</canvas>

<script type="text/javascript">

/**

 * 圆的方程：x = r * cosA + X, y = r * sinA + Y

 * 浏览器为了达到抗锯齿的效果会做额外的运算，故为提高渲染效率，均使用整数进行绘制。

 */

(function() {

	let clockCvs = document.getElementById('clock')

	let clockHandCvs = document.getElementById('clockHand')

	if (!clockCvs || !clockCvs.getContext) return

	clockCvs.width = clockHandCvs.width = 310

	clockCvs.height = clockHandCvs.height = 310

	let clockCtx = clockCvs.getContext('2d')

	let clockHandCtx = clockHandCvs.getContext('2d')

	// X坐标偏移

	const X = 155

	// Y坐标偏移

	const Y = 155

	// 钟的半径

	const R = 150

	renderClockPlate()

	renderClockTime()

	renderClockHand()

	setInterval(function () {

		clockHandCtx.clearRect(0, 0, clockHandCvs.width, clockHandCvs.height)

		renderClockHand()

	}, 1000)

	// 渲染表盘

	function renderClockPlate () {

		drawCircle(clockCtx, clockCvs, X, Y, '#070702', R, 1)

		drawCircle(clockCtx, clockCvs, X, Y, '#4f4f52', R - 3, 5)

		drawCircle(clockCtx, clockCvs, X, Y, '#070702', R - 6, 3)

		drawCircle(clockCtx, clockCvs, X, Y, '#dddddd', R - 8)

		drawCircle(clockCtx, clockCvs, X, Y, '#121213', R - 10, 3)

		drawCircle(clockCtx, clockCvs, X, Y, '#19191a', R - 12, 0, 'fill', true)

		drawCircle(clockCtx, clockCvs, X, Y, '#4e4738', 15, 0, 'fill')

		drawCircle(clockCtx, clockCvs, X, Y, '#eac55a', 10, 0, 'fill')

		drawCircle(clockCtx, clockCvs, X, Y, '#3e3e41', 8, 0, 'fill')

		drawCircle(clockCtx, clockCvs, X, Y, '#000000', 3, 0, 'fill')

	}

	// 渲染时间

	function renderClockTime () {

		for (let angle = -90; angle < 270; angle = angle + 6) {

			let x = Math.round((R - 18) * Math.cos(angle / 180 * Math.PI) + X)

			let y = Math.round((R - 18) * Math.sin(angle / 180 * Math.PI) + Y)

			let r = angle % 90 === 0 ? 4 : 2

			drawCircle(clockCtx, clockCvs, x, y, '#eac55a', r, 0, 'fill')

			if (angle % 30 === 0) {

				x = Math.round((R - 35) * Math.cos(angle / 180 * Math.PI) + X - 4)

				y = Math.round((R - 35) * Math.sin(angle / 180 * Math.PI) + Y + 6)

				clockCtx.font = angle % 90 === 0 ? 'bold 15px yahei' : '12px yahei'

				clockCtx.fillText((angle + 90) / 30 || 12, x , y)

			}

		}

	}

	// 渲染表针

	function renderClockHand () {

		let date = new Date()

		let hour = date.getHours()

		let minute = date.getMinutes()

		let second = date.getSeconds()

		// 秒针

		let angle1 = (second * 6 - 90)

		let x = Math.round((R - 45) * Math.cos(angle1 / 180 * Math.PI) + X)

		let y = Math.round((R - 45) * Math.sin(angle1 / 180 * Math.PI) + Y)

		drawLine(clockHandCtx, [[X, Y], [x, y]], 1)

		// 分针

		let angle2 = (minute * 6 - 90)

		x = Math.round((R - 65) * Math.cos(angle2 / 180 * Math.PI) + X)

		y = Math.round((R - 65) * Math.sin(angle2 / 180 * Math.PI) + Y)

		drawLine(clockHandCtx, [[X, Y], [x, y]], 2)

		// 时针， 时针角度 = 小时角度 + 分钟角度

		let angle3 = ((hour % 12) * 30 - 90) + (angle2 / 12)

		x = Math.round((R - 90) * Math.cos(angle3 / 180 * Math.PI) + X)

		y = Math.round((R - 90) * Math.sin(angle3 / 180 * Math.PI) + Y)

		drawLine(clockHandCtx, [[X, Y], [x, y]], 4)

	}

	/**

	 * @param {String} color 颜色

	 * @param {Number} r 圆半径

	 * @param {Number} lineWidth 线条粗细

	 * @param {String} type 类型，stroke/fill

	 * @param {Boolean} isLinear 是否渐变

	 */

	function drawCircle (ctx, cvs, x, y,color = '#000000', r = 10, lineWidth = 2, type = 'stroke', isLinear = false) {

		let grd = ctx.createLinearGradient(0, 0, cvs.width, cvs.height)

		grd.addColorStop(0, color)

		grd.addColorStop(0.5, '#555555')

		grd.addColorStop(1, color)

		ctx[type + 'Style'] = isLinear ? grd : color

		ctx.lineWidth = lineWidth

		ctx.beginPath()

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

		ctx.closePath()

		ctx[type]()

	}

	/**

	 * @param {Array} pos 坐标点集合，如 [[0, 0], [120, 120]]

	 * @param {String} color 颜色

	 * @param {Number} lineWidth 线条粗细

	 */

	function drawLine (ctx, pos, lineWidth = 2, color = '#eac55a') {

		ctx.strokeStyle = color

		ctx.lineWidth = lineWidth

		ctx.beginPath()

		ctx.moveTo(pos[0][0], pos[0][1])

		for (let i = 0, len = pos.length; i < len; i++) {

			ctx.lineTo(pos[i][0], pos[i][1])

		}

		ctx.stroke()

		ctx.closePath()

	}

})()

</script>

</body>

</html>

　　

Canvas - 时钟绘制的更多相关文章

  1. canvas自适应圆形时钟绘制

    前面的话 前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制 效果演示 最终自适应圆形时钟的效果如下所示 功能分析 下面来分析一下该圆形时钟的功能 [1]静态背景 对于 ...

  2. 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

  3. canvas基础绘制-绚丽时钟

    效果图: 与canvas基础绘制-绚丽倒计时的代码差异: // var endTime = new Date();//const声明变量,不可修改,必须声明时赋值: // endTime.setTim ...

  4. 原生js之canvas时钟组件

    canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...

  5. Javascript高级编程学习笔记（88）—— Canvas(5)绘制文本

    绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...

  6. Javascript高级编程学习笔记（87）—— Canvas(4)绘制路径

    绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x, ...

  7. 浅谈JavaScript的Canvas（绘制图形）

    HTML5中新增加的一个元素canvas,要使用canvas元素,浏览器必须支持html5.通过canvas标签来创建元素,并需要为canvas指定宽度和高度,也就是绘图区域的大小. <canv ...

  8. canvas快速绘制圆形、三角形、矩形、多边形

    想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:项目代码github地址,喜 ...

  9. Coffeescript实现canvas时钟

    前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...

随机推荐

  1. php项目中常用的log日志记录方法

    function log_result($str) { if (LOG_WRITEOUT == 1) { $fp = fopen ( "log.txt", "a+&quo ...

  2. 20155214&20155216 实验一 开发化境的熟悉

    20155214&20155216 实验一 开发化境的熟悉 实验内容: 实验一 开发化境的熟悉-1-交叉编译环境-(使用实验室台式机) 1.建立实验目录"mkdir linux_组员 ...

  3. 201621123040《Java程序设计》第5周学习总结

    1.本周学习总结 1.1写出你认为本周学习中比较重要的知识点关键词 关键词:接口 Comparable Comparator 比较排序 1.2尝试使用思维导图将这些关键词组织起来.注:思维导图一般不需 ...

  4. PTA题目的處理（四）

    题目7-3 求交错序列前N项和 1.实验代码 #include <stdio.h> //#include <stdlib.h> int main() { ,N; double ...

  5. Android webview Mixed Content无法显示图片解决

    转自:http://blog.csdn.net/crazy_zihao/article/details/51557425 前言 在使用WebView加载https资源文件时,如果认证证书不被Andro ...

  6. ViurtualBox配置虚拟机Linux的网络环境

    之前可以使用VMware配置成功,让虚拟机和本地通信,虚拟机可以访问外网,但是VMware体积太大了,最后终于把virtualBox也配置成功,也使得两者兼备 环境:本地windows7 64位专业版 ...

  7. 第四章 使用jQuery操作DOM

    第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...

  8. MHA 安装与简单使用

    MHA 在过去几年一直用的比较火,特别是在在传统复制的那个年代.至从有了GTID好像我们也可以把MHA给忘记了,但是很多企业现在还是在用的比较多.每个公司的MHA玩法也不太一样,但是本质都是差不多了. ...

  9. Python内置函数(10)——float

    英文文档: class float([x]) Return a floating point number constructed from a number or string x. If the ...

  10. python __str__ 和__repr__方法

    看下面的例子就明白了 class Test(object): def __init__(self, value='hello, world!'): self.data = value >> ...