用canvas画布画时钟

标签: 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还可以画很多东西,大家不妨自己动手试试。

原文链接:加载失败,请重新获取