html5时钟在图片上画指针,html5如何使用canvas绘制“钟表”图案？（代码实例）...

本章给大家介绍html5如何使用canvas绘制“钟表”图案？(代码实例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一、介绍Canvas

Canvas 是指定了长度和宽度的矩形画布，我们将使用新的HTML5 JavaScript，可使用HTML5 JS API 来画出各种图形。不过，canvas本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。

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

二、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文件，新建画板并且给画板增加些样式，就像这样

canvas画布

#canvas {

border: 1px solid #000;

margin: 0 auto;

display: block;

}

然后开始操作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() 画布的位置。

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

创建表盘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();

效果图：

2.创建指针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();

效果图：

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

3.最后完成

我们需要把上边的绘制封装成方法，然后不停的绘制不停的清除这样钟表就动起来了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次。