使用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()
}
设置定时重新绘制
要想动态的让时钟跑起来，我们需要设置一个定时执行器，每秒更新一次,这样始终就完全动起来了
setInterval(startColor,1000)
总结
这个时钟的宽度和高度已经写死了，在动态调节的过程中，会出现错位等问题，下一篇将修正这个问题，敬请期待。
使用Canvas绘制简单的时钟控件的更多相关文章
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- JavaScript动画基础：canvas绘制简单动画
动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...
- canvas绘制简单图形
canvas绘图篇: canvas绘制矩形: <!DOCTYPE html> <html> <head lang="en"> <meta ...
- C# 时钟控件
//控件名:myNewClock //作者:刘典武 //时间:2011-06-10 using System; using System.Collections.Generic; using Syst ...
- 9款精致HTML5/jQuery日历时钟控件源码下载（源码请见百度云） 链接：http://pan.baidu.com/s/1geIXe75 密码：7m4a
现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...
- [HTML5] Canvas绘制简单图片
获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象的onload方法,调用context对象的drawImage()方法,参数:Image对象,x坐标, ...
- [HTML5] Canvas绘制简单形状
使用canvas来进行绘画,它像很多其他dom对象一样,有很多属性和方法,操作这些方法,实现绘画 获取canvas对象,调用document.getElementById()方法 调用canvas对象 ...
- canvas绘制简单的霓虹灯效果
canvas简单动画分为三个步骤: 1.清除画布区域的内容: 2.重绘: 3.执行requestAnimationFrame(); 这个霓虹灯效果的demo,我没有用requestAnimationF ...
- canvas绘制简单小铅笔
对应HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
随机推荐
- mysql查看编码格式以及修改编码格式
1.进入mysql,输入show variables like 'character%';查看当前字符集编码情况,显示如下: 其中,character_set_client为客户端编码方式: char ...
- TCP与UDP区别总结
TCP与UDP区别总结:1.TCP面向连接(如打电话要先拨号建立连接);UDP是无连接的,即发送数据之前不需要建立连接2.TCP提供可靠的服务.也就是说,通过TCP连接传送的数据,无差错,不丢失,不重 ...
- netsh winsock reset命令
公司一台电脑无法浏览网页,其他基本正常,鼓捣了一个多小时,依然无法解决.. 一开始按照正常思路,感觉是dns的问题,查看了下DNS,真是自定义的,于是改成自动获取,无效 重启了网卡,无效 重启电脑,无 ...
- zookeeper使用详解（命令、客户端、源码）
1. zookeeper使用详解(命令.客户端.源码) 1.1. 前言 zookeeper我们常用来做分布式协调中间件,很多时候我们都接触不到它的原理和用法,我对他的了解也仅限于知道它可以做分布式 ...
- python爬虫数据解析之正则表达式
爬虫的一般分为四步,第二个步骤就是对爬取的数据进行解析. python爬虫一般使用三种解析方式,一正则表达式,二xpath,三BeautifulSoup. 这篇博客主要记录下正则表达式的使用. 正则表 ...
- [Abp 源码分析]十六、后台作业与后台工作者
0. 简介 在某些时候我们可能会需要执行后台任务,或者是执行一些周期性的任务.比如说可能每隔 1 个小时要清除某个临时文件夹内的数据,可能用户会要针对某一个用户群来群发一组短信.前面这些就是典型的应用 ...
- 微信小程序入门（五）
24.MINA框架讲解 MINA框架架构 25.小程序运行机制 小程序在首次打开的时间会比较长,后续再打开启动会很快,那么小程序是如何启动的呢? 运行机制-启动 冷启动 热启动 热启动:假入用户已经打 ...
- asp.net core 系列 3 依赖注入服务
一. 依赖注入概述 在软件设计的通用原则中,SOLID是非常流行的缩略语,它由5个设计原则的首字母构成:单一原则(S).开放封闭原则(O).里氏替换原则(L).接口分离原则(I).依赖反转原则(D). ...
- Python爬虫入门教程 9-100 河北阳光理政投诉板块
河北阳光理政投诉板块-写在前面 之前几篇文章都是在写图片相关的爬虫,今天写个留言板爬出,为另一套数据分析案例的教程做做准备,作为一个河北人,遵纪守法,有事投诉是必备的技能,那么咱看看我们大河北人都因为 ...
- 用Javascript方式实现LeetCode中的算法（更新中）
前一段时间抽空去参加面试,面试官一开始让我做一道题,他看完之后,让我回答一下这个题的时间复杂度并优化一下,当时的我虽然明白什么是时间复杂度,但不知道是怎么计算的,一开局出师不利,然后没然后了,有一次我 ...