Canvas - 时钟绘制

导语：距离上一次写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 - 时钟绘制的更多相关文章

canvas自适应圆形时钟绘制
前面的话前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制效果演示最终自适应圆形时钟的效果如下所示功能分析下面来分析一下该圆形时钟的功能 [1]静态背景对于 ...
环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）
缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...
canvas基础绘制-绚丽时钟
效果图: 与canvas基础绘制-绚丽倒计时的代码差异: // var endTime = new Date();//const声明变量,不可修改,必须声明时赋值: // endTime.setTim ...
原生js之canvas时钟组件
canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...
Javascript高级编程学习笔记（88）—— Canvas(5)绘制文本
绘制文本同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数要绘制的文本字符串绘 ...
Javascript高级编程学习笔记（87）—— Canvas(4)绘制路径
绘制路径 2D上下文支持许多在画布上绘制路径的方法通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径然后再通过下列的方法绘制路径: arc(x, ...
浅谈JavaScript的Canvas（绘制图形）
HTML5中新增加的一个元素canvas,要使用canvas元素,浏览器必须支持html5.通过canvas标签来创建元素,并需要为canvas指定宽度和高度,也就是绘图区域的大小. <canv ...
canvas快速绘制圆形、三角形、矩形、多边形
想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:项目代码github地址,喜 ...
Coffeescript实现canvas时钟
前言参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...

随机推荐

python提示import XX 不存在，如何排查错误
1.如何确定文件夹是一个包, 检查包中是否有__init__.py 文件, 在python模块的每一个包中,都有一个__init__.py文件(这个文件定义了包的属性和方法)然后是一些模块文件和子目录 ...
lua_cocos精灵的不断闪动
一. 刚开始使用 local blink = cc.Blink:create(1, 10) sprite:runAction(blink) ...
openjudge(二)
强制类型转换的作用:按照规范输出.
JAVA-基础语法篇
JAVA-基础语法篇一. 基础语法: 对大小写敏感类名的首字母大写方法名首字母小写,后面用驼峰发命名源文件名和类名要相同主方法入口: public static void main( ...
Mybatis学习笔记一
Mybatis介绍 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为M ...
学号：201621123032 《Java程序设计》第13周学习总结
1:本周学习总结 2:为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 2.1:简述你想为你的系统增加什么网络功能?设计思路是什么? 创建了一个服务器监听8080端口,通过网络助手客户 ...
项目Beta冲刺Day7
项目进展李明皇今天解决的进度部分数据传递和使用逻辑测试林翔今天解决的进度服务器端查看个人发布的action,修改已发布消息状态的action,仍在尝试使用第三方云存储功能保存图片孙敏铭 ...
LoadRunner录制手机APP教程
1. 开启fiddler 2. 打开HP Virtual User Generator,新建->Web (HTTP/HTML)>创建 3. 点击开始录制: (1) ...
nyoj 对决
对决时间限制:1000 ms | 内存限制:65535 KB 难度:0 描述 Topcoder 招进来了 n 个新同学,Yougth计划把这个n个同学分成两组,要求每组中每个人必须跟另一组中 ...
【原创】Webpack构建中hash的优化
背景: SPA的vue应用,采用webpack2构建,打包入口为main.js 输出:main模块打包成app.js,公共lib打包成vendor.js,公共样式打包成app.css,运行时依赖打包成 ...

Canvas - 时钟绘制

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

随机推荐

热门专题