canvas绘图之钟表

栏目: Html5 · 发布时间: 6年前

内容简介：最近公司做项目用到了统计图一些东西，我当然用的是第三方类库，周末在家没事想起了canvas绘图，就熟悉了一下并做了一个钟表的小例子，如图：虽然样子丑点，但是该有的功能一点都不少，接下来就说下怎样实现的。

前言

最近公司做项目用到了统计图一些东西，我当然用的是第三方类库，周末在家没事想起了canvas绘图，就熟悉了一下并做了一个钟表的小例子，如图：

canvas绘图之钟表

虽然样子丑点，但是该有的功能一点都不少，接下来就说下怎样实现的。

介绍canvas

现在大部分浏览器都支持canvas，使用canvas前要新建个画布，就是这样

<canvas id="myCanvas" width="200" height="100"></canvas>
复制代码

然后再说一些常用的属性和方法：

颜色和样式

fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色

矩形

rect() 创建矩形
fillRect() 绘制“被填充”的矩形
strokeRect() 绘制矩形（无填充）
clearRect() 在给定的矩形内清除指定的像素

路径

fill() 填充当前绘图（路径）
stroke() 绘制已定义的路径
beginPath() 起始一条路径，或重置当前路径
moveTo() 把路径移动到画布中的指定点，不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc() 创建弧/曲线（用于创建圆形或部分圆）
arcTo() 创建两切线之间的弧/曲线
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false

文本

font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对齐方式
textBaseline 设置或返回在绘制文本时使用的当前文本基线
fillText() 在画布上绘制“被填充的”文本
strokeText() 在画布上绘制文本（无填充）
measureText() 返回包含指定文本宽度的对象

图像绘制

drawImage() 向画布上绘制图像、画布或视频

今天用到的暂时就这么多。

绘制钟表

首先新建一个html文件，新建画板并且给画板增加些样式，就像这样

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>钟表</title>
        <style>
	#canvas {
	    border: 1px solid #000;
	    margin: 0 auto;
	    display: block;
	}
        </style>
    </head>
    <body>
	<!-- 新建画板 -->
	<canvas id="canvas" width="400" height="400"></canvas>
    </body>
</html>
复制代码

然后开始操作canvas,

//获取canvas标签，并且创建 context 对象
var canvas = document.getElementById('canvas'),
	context = canvas.getContext('2d'),
	deg = Math.PI/180;
context.translate(200,200);	复制代码

说明：getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，deg计算圆周率，translate() 画布的位置

创建表盘、数字、刻度、中心点

创建表盘

context.beginPath();
context.arc(0, 0, 150, 0, 360 * deg);
context.lineWidth = 3;
context.stroke();
context.closePath();
复制代码

创建数字

//创建数字
for (var i = 1; i <= 12; i++) {
  context.beginPath();
  context.save();
  context.rotate(30 * i * deg);
  context.textAlign = 'center';
  if (i % 3 == 0) {
      context.fillStyle = 'red';
      context.font = "normal 28px arial";
      context.fillText(i, 0, -110);
  } else {
      context.font = "normal 20px arial";
      context.fillText(i, 0, -120);
  }
  context.restore();
  context.closePath();
}
复制代码

创建刻度

for (var i = 1; i <= 60; i++) {
    context.beginPath();
    context.save();
    context.rotate(6 * i * deg);
    context.moveTo(0, -150);
    //判断刻度显示颜色
    if (i % 15 == 0) {
        context.strokeStyle = 'red';
        context.lineWidth = 3;
        context.lineTo(0, -135);
        context.stroke();
    } else if (i % 5 == 0) {
        context.strokeStyle = 'orange';
        context.lineWidth = 2;
        context.lineTo(0, -140);
        context.stroke();
    } else {
        context.strokeStyle = '#000';
        context.lineWidth = 1;
        context.lineTo(0, -145);
        context.stroke();
    }
    context.restore();
    context.closePath();
}
复制代码

创建中心点

context.beginPath();
 context.arc(0, 0, 5, 0, 360 * deg);
 context.fill();
 context.closePath();
复制代码

如图：

创建指针

var nowdate = new Date(),
     hour = nowdate.getHours() % 12,
     minu = nowdate.getMinutes(),
     second = nowdate.getSeconds();
 var ms = nowdate.getMilliseconds(); //毫秒
 //秒针
 context.beginPath();
 context.save();
 context.lineWidth = 1;
 context.strokeStyle = 'red';
 //context.rotate(6*second*deg);
 context.rotate((ms / 1000 + second) * 6 * deg);
 context.moveTo(0, 20);
 context.lineTo(0, -130);
 context.stroke();
 context.restore();
 context.closePath();
 //分针
 context.beginPath();
 context.save();
 context.lineWidth = 2;
 context.strokeStyle = 'orange';
 //context.rotate((second/60+minu)*6*deg);
 context.rotate((ms / 1000 / 60 + second / 60 + minu) * 6 * deg);
 context.moveTo(0, 10);
 context.lineTo(0, -120);
 context.stroke();
 context.restore();
 context.closePath();
 //时针
 context.beginPath();
 context.save();
 context.lineWidth = 3;
 context.strokeStyle = '#000';
 //context.rotate((second/3600+minu/60+hour)*30*deg);
 context.rotate((ms / 1000 / 60 / 60 + second / 60 / 60 + minu / 60 + hour) * 30 * deg);
 context.moveTo(0, 0);
 context.lineTo(0, -110);
 context.stroke();
 context.restore();
 context.closePath();
复制代码

如图：

是不是以为到现在就结束了，我大声的告诉大家没有，现在才是刚刚开始，接下来就是见证奇迹的时刻。。。

最后完成

我们需要把上边的绘制封装成方法，然后不停的绘制不停的清除这样钟表就动起来了

function dialPlate() { //创建表盘
    //context.clearRect(-150,-150,400,400);//清除画布
    context.beginPath();
    context.arc(0, 0, 150, 0, 360 * deg);
    context.lineWidth = 3;
    context.stroke();
    context.closePath();
    //创建刻度
    for (var i = 1; i <= 60; i++) {
        context.beginPath();
        context.save();
        context.rotate(6 * i * deg);
        context.moveTo(0, -150);
        if (i % 15 == 0) {
            context.strokeStyle = 'red';
            context.lineWidth = 3;
            context.lineTo(0, -135);
            context.stroke();
        } else if (i % 5 == 0) {
            context.strokeStyle = 'orange';
            context.lineWidth = 2;
            context.lineTo(0, -140);
            context.stroke();
        } else {
            context.strokeStyle = '#000';
            context.lineWidth = 1;
            context.lineTo(0, -145);
            context.stroke();
        }
        context.restore();
        context.closePath();
    }
    //创建数字
    for (var i = 1; i <= 12; i++) {
        context.beginPath();
        context.save();
        context.rotate(30 * i * deg);
        context.textAlign = 'center';
        if (i % 3 == 0) {
            context.fillStyle = 'red';
            context.font = "normal 28px arial";
            context.fillText(i, 0, -110);
        } else {
            context.font = "normal 20px arial";
            context.fillText(i, 0, -120);
        }
        context.restore();
        context.closePath();
    }
    //中心点
    context.beginPath();
    context.arc(0, 0, 5, 0, 360 * deg);
    context.fill();
    context.closePath();
}

function Pointer() { //创建指针
    var nowdate = new Date(),
        hour = nowdate.getHours() % 12,
        minu = nowdate.getMinutes(),
        second = nowdate.getSeconds();
    var ms = nowdate.getMilliseconds(); //毫秒
    //秒针
    context.beginPath();
    context.save();
    context.lineWidth = 1;
    context.strokeStyle = 'red';
    //context.rotate(6*second*deg);
    context.rotate((ms / 1000 + second) * 6 * deg);
    context.moveTo(0, 20);
    context.lineTo(0, -130);
    context.stroke();
    context.restore();
    context.closePath();
    //分针
    context.beginPath();
    context.save();
    context.lineWidth = 2;
    context.strokeStyle = 'orange';
    //context.rotate((second/60+minu)*6*deg);
    context.rotate((ms / 1000 / 60 + second / 60 + minu) * 6 * deg);
    context.moveTo(0, 10);
    context.lineTo(0, -120);
    context.stroke();
    context.restore();
    context.closePath();
    //时针
    context.beginPath();
    context.save();
    context.lineWidth = 3;
    context.strokeStyle = '#000';
    //context.rotate((second/3600+minu/60+hour)*30*deg);
    context.rotate((ms / 1000 / 60 / 60 + second / 60 / 60 + minu / 60 + hour) * 30 * deg);
    context.moveTo(0, 0);
    context.lineTo(0, -110);
    context.stroke();
    context.restore();
    context.closePath();
}

dialPlate();
Pointer();
setInterval(function(){
	dialPlate();
	Pointer();
},1000/60)
复制代码

说明：动画每秒执行60次是最好的，所以定时器才让他没秒执行60次。

到现在是真结束了，一个简单的canvas绘制钟表就完成了。希望可以到项目上点一个 star 作为你对这个项目的认可与支持，谢谢。听说长的帅的小哥哥和长的漂亮的小姐姐都会点赞的。

项目地址： github.com/Mr-MengBo/C…

以上所述就是小编给大家介绍的《canvas绘图之钟表》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

重新定义团队：谷歌如何工作

拉兹洛·博克 / 宋伟 / 中信出版集团 / 2015-12-1 / CNY 56.00

谷歌首席人才官拉斯洛•博克权威力作，谷歌公开认可的谷歌高层作品，首度揭秘谷歌颠覆工业时代模式的人才和团队管理的核心法则，《纽约时报》畅销榜第一名，Business Insider 2015最佳商业书籍，谷歌的创造力就在于此！编辑推荐！ 1、谷歌人才官首次公开谷歌人才和团队管理的核心秘籍在谷歌执掌人事多年的拉斯洛•博克是人才和团队管理的顶级专家。他加入谷歌后，谷歌的员工数从六......一起来看看《重新定义团队：谷歌如何工作》这本书的介绍吧!

码农工具

canvas绘图之钟表

前言

介绍canvas

颜色和样式

矩形

路径

文本

图像绘制

绘制钟表

创建表盘、数字、刻度、中心点

创建指针

最后完成

重新定义团队：谷歌如何工作

在线进制转换器

HTML 编码/解码

XML 在线格式化