使用Canvas绘制简单的时钟控件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。

没有Canvas的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flash进行交互。有了Canvas，我们就再也不需要Flash了，直接使用JavaScript完成绘制。

基本使用

在html源码中只要像普通标签那样使用即可，比如下面的示例，但是在一些老旧的浏览器在中是不支持canvas的，因此我们常在canvas标签中提示用户，具体代码如下所示。

<canvas id="myCanvas" width="300px" height="300px"> 您的浏览器不支持canvas,请尝试更新浏览器 </canvas>

或者使用JS脚本来进行检测，使用JavaScript代码检测是否支持canvas的代码示例如下：

var myCanvas = document.getElementById('myCanvas'); if (myCanvas.getContext) { myCanvas.log('你的浏览器支持Canvas!'); } else { myCanvas.log('你的浏览器不支持Canvas!'); }

开始绘制

由于绘制canvas通常代码需要比较多，我们常常使用引用js的方式来绘制canvas,这里我们也是引入js文件来操作canvas，HTML源码如下所示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学习Canvas绘制始终效果</title> <style> canvas{ border: 1px solid #cccccc; } </style> </head> <body> <canvas id="myCanvas" width="300px" height="300px"> 您的浏览器不支持Canvas,请尝试更新浏览器 </canvas> <script src="js/canvas.js"></script> </body> </html>

创建js文件

根据实际的需要创建js文件,这里我引入的地址是js/canvas.js，因此需要和HTML源码文件同级下创建js文件夹，然后再js文件夹中创建canvas.js文件。

绘制测试示例

绘制效果如下

<div style="align: center"> <img src = "http://www.zhoutao123.com:9000/upload/2017/12/4s4ptf692qhjtq6f1pdddj1l9b.png" width="200"> </div>

动态效果

查看动态时钟效果

预备代码

这里保持一些全局变量，方便后面使用的

//获取canvas的上下文环境 var myCanvas = document.getElementById('myCanvas') var ctx = myCanvas.getContext('2d') //获取canvas的宽度和高度 var canvasWidth = myCanvas.width var canvasHeight = myCanvas.height

绘制背景

我们首先绘制背景，分析背景可以看到，他是由一个大的黑色与圆圈包裹，里面有一个灰色的略小的圆圈，在灰色圆圈的周围均匀分布着时钟点，这些时钟点每逢5的倍数的时候突出显示，否则就是灰色显示，这就是我们的需求，具体注释在代码中可以详细看到。

//开始绘制背景 function drawBackground() { //未防止当前画布环境被破坏,因此我们保存当前的绘制环境 ctx.save() //开始绘制路径 ctx.beginPath() //配置绘制颜色,我们首先绘制的是黑色圆圈,因此我们配置为黑色 ctx.strokeStyle = '#000000' //绘制宽度为6个像素 ctx.lineWidth = 6 //开始绘制圆,圆心未知是宽和高的一半,半径是宽度的一半减去圆圈的宽度 //这里最后的两个参数需要注意 //指的是绘制圆圈的起点和绘制的弧度 //我们从0点开始绘制然后绘制2*PI个弧度,也就是一个正圆 //这里的点是从x轴正方向开始的 ctx.arc(canvasWidth/2,canvasHeight/2,canvasHeight/2-3,0,2*Math.PI) //配置完成,开始绘制 ctx.stroke() //同样的需求开始绘制灰色的圆圈 ctx.beginPath() ctx.strokeStyle = '#CCCCCC' ctx.lineWidth = 1 ctx.arc(canvasWidth/2,canvasHeight/2,(canvasWidth/2-15),0,2*Math.PI) ctx.stroke() //将原点从左上角0,0移动到中心位置 ctx.translate(canvasWidth/2,canvasHeight/2) //需要现实的数字 //这是可以看到,数字是从3开始的,也验证了我们的之前说的绘制从x轴正方向开始 //在时钟界面x轴正方向就是3点钟 var colorNumber = [3,4,5,6,7,8,9,10,11,12,1,2] //配置字体和对齐方向 ctx.font="25px Arial"; ctx.textAlign = "center" ctx.textBaseline = "middle" //循环遍历,开始绘制数字 for(var i = 0;i<colorNumber.length;i++){ var dep = 2 * Math.PI /12 * i; ctx.fillText(colorNumber[i],(canvasWidth/2-30) * Math.cos(dep),(canvasHeight/2-30)* Math.sin(dep)) } //绘制时钟点 for(var i = 0;i<60;i++){ var rad = 2 * Math.PI /60 * i; var x = Math.cos(rad) * (canvasHeight/2-16) var y = Math.sin(rad) * (canvasHeight/2-16) ctx.beginPath(); //如果是5的倍数,使用黑色填充,否则使用灰色填充 if (i % 5 === 0){ ctx.fillStyle = "#000" ctx.arc(x,y,2,0,2*Math.PI,false) }else{ ctx.fillStyle = "#CCC" ctx.arc(x,y,2,0,2*Math.PI,false) } ctx.fill() } }

绘制时针

绘制时针、分针以及秒针的理念是先绘制0时刻的样子，然后旋转画布一定的弧度，从而达到转动的效果。

//绘制时针 function drawHours(hours,minte) { //保存环境 ctx.save() //计算时钟角度和偏离的角度 var rad = 2 * Math.PI / 12 * hours; var rad2 = 2 * Math.PI / 12 /60 * minte; //旋转画布 ctx.rotate(rad+rad2) ctx.beginPath(); //配置绘制效果 ctx.lineWidth = 6 ctx.strokeStyle = "#000" //线的两端保持圆角 ctx.lineCap = "round" //将绘制点移动到中心原点以下10个像素点 ctx.moveTo(0,10); //绘制一个线 ctx.lineTo(0,-(canvasWidth-150)/2) ctx.stroke() //恢复之前保存的环境 ctx.restore() }

绘制分针和秒针

绘制分针和秒针的方法和时针一样，仅仅是绘制的颜色和宽度不一样，这里不再详细赘述.

//绘制分针 function drawMinute(minute) { ctx.save() var rad = 2 * Math.PI / 60 * minute; ctx.rotate(rad) ctx.beginPath(); ctx.lineWidth = 3 ctx.strokeStyle = "#000" ctx.lineCap = "round" ctx.moveTo(0,10); ctx.lineTo(0,-(canvasWidth-100)/2) ctx.stroke() ctx.restore() } //绘制秒针 function drawSecond(second) { ctx.save() var rad = 2 * Math.PI / 60 * second; ctx.rotate(rad) ctx.beginPath(); ctx.lineWidth = 3 ctx.strokeStyle = "#f00" ctx.lineCap = "round" ctx.moveTo(0,20); ctx.lineTo(0,-(canvasWidth-40)/2) ctx.stroke() ctx.restore() }

绘制中心白点

时针、分针和秒针的中心集合点出有白点，类似某个机械元件，将三个针锁住，我们只要绘制原点即可。

//绘制原点 function drawPoint() { ctx.beginPath() ctx.fillStyle ="#FFF" ctx.arc(0,0,3,0,2*Math.PI) ctx.fill() }

开始时钟

我们将当前时间绘制到始终上面即可,需要注意的是，在绘制之前需要将之前绘制的东西清除掉。

//开始启动时针 function startColor() { //清除画布内容 ctx.clearRect(0,0,canvasWidth,canvasHeight) var date = new Date() var hour = date.getHours() var minute = date.getMinutes() var second = date.getSeconds() drawBackground() drawHours(hour,minute) drawMinute(minute) drawSecond(second) drawPoint() ctx.restore() }