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 = ElementById('canvas'),
context = Context('2d'),
deg = Math.PI / 180;
说明：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();
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.closePath();
}
创建刻度for (var i = 1; i <= 60; i ) { context.beginPath();
context.save();
//判断刻度显⽰颜⾊
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.closePath();
}
创建中⼼点context.beginPath();
context.arc(0, 0, 5, 0, 360 * deg);
context.fill();
context.closePath();
效果图：
canvas动画2.创建指针var nowdate = new Date(),
hour = Hours() % 12,
minu = Minutes(),
second = Seconds();
var ms = Milliseconds(); //毫秒
//秒针
context.beginPath();
context.save();
context.lineWidth = 1;
context.strokeStyle = 'red';
//ate(6*second*deg);
context.lineTo(0, -130);
context.stroke();
context.closePath();
//分针
context.beginPath();
context.save();
context.lineWidth = 2;
context.strokeStyle = 'orange';
//ate((second/60 minu)*6*deg);
context.lineTo(0, -120);
context.stroke();
context.closePath();
//时针
context.beginPath();
context.save();
context.lineWidth = 3;
context.strokeStyle = '#000';
//ate((second/3600 minu/60 hour)*30*deg);
context.lineTo(0, -110);
context.stroke();
context.closePath();
效果图：
是不是以为到现在就结束了，我⼤声的告诉⼤家没有，现在才是刚刚开始，接下来就是见证奇迹的时刻。。。
3.最后完成

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。