用canvas画布画时钟

canvas

canvas简介

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

准备工作

在我们开始画时钟之前，我们需要页面上画一个canvas用来绘制时钟，而且
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
其中width和height是画布的宽和高，并给它取个id后面方便找到她。
canvas.getContext(“2d”)，引号中的2d标识是她是平面的

开始

setInterval(function(){

}，1000）
先写个定时器每一秒执行一次，1000就代表1秒，然后我们后面代码都写在定时器里面
时钟肯定要获取时间的，所以要获取一波时间

//获取时间
var time = new Date();
var second = time.getSeconds();
var minute = time.getMinutes();
var hour = time.getHours();
//将24小时进制转为12小时，且为浮点数
var hour1 = hour+minute/60;
hour1 =hour1>12?hour1-12: hour1;
//获取现在全部时间
var NowTime = time.toLocaleString();
在获取时间后就可以先绘制表盘
ctx.beginPath();
ctx.lineWidth=8;
//设置渐变色
var jianbain = ctx.createLinearGradient(0,0,500,0);
jianbain.addColorStop(“0”,“red”);
jianbain.addColorStop(“0.5”,“green”);
jianbain.addColorStop(“1”,“blue”);
ctx.strokeStyle =jianbain;
ctx.arc(250,250,200,0,360,false);
ctx.stroke();
ctx.closePath();
.lineWidth是设置表盘的宽度
设置渐变色就是为了表盘好看些，这里选用三原色。
表盘有了就开始绘时分刻度

光有刻度还不行，我们还需要表盘的最中心的表盘中心
最后就是画表盘的时针，分针，秒针

最后来看下效果如下：

可能颜色不好看，这些都是可以随便改的，还有就是表盘中心点被针盖住了，这时可以再绘制一下中心点

         ctx.beginPath();ctx.lineWidth=1;//原谅色表心ctx.fillStyle="green";ctx.arc(250,250,4,0,360,false);ctx.fill();ctx.closePath();

效果还可以吧嘿嘿，canvas还可以画很多东西，大家不妨自己动手试试。