表盘时针的html代码,html5画布操作的简单学习-简单时钟

html5画布操作的简单学习-简单时针

效果图

一.什么是 Canvas？

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

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

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

二.本次学习html5的canvas的简单函数

getContext(style)-----------获取canvas画图操作对象，style为样式参数，二维空间2d，三维空间3d

moveTo(x,y)-----------------移动操作

lineTo(x,y)-----------------画直线

translate(x,y)-------------设置坐标轴的原点

rotate(arc)----------------坐标的旋转，arc为弧度，弧度=角度*π/180;

store()------------------------展现画布

clearRect(x1,y1,x2,y2)-----清除长方形的画布，x1，y1为长方形的起点，x2,y2为长方形的起点对角线的点

三、画时钟步骤

1.新建文件clock.html,文件内容如下，以后步骤的代码都现在script标签中填写

浏览器不支持画布操作

2.获取画布操作二维空间的操作

var clock=document.getElementById("clock");

var ctx=clock.getContext("2d");

3.画时钟边界--表盘

定义目前画时钟的时间

时钟时间：3点30分45秒

var hour=3;

var min=30;

var sec=45;

//画表盘

ctx.lineWidth=10;

ctx.strokeStyle="blue";

ctx.beginPath();

ctx.arc(250,250,200,0,360,false);

ctx.closePath();

ctx.stroke();

4.画时钟的时刻度

for(var i=0;i<12;i++){

ctx.save();

ctx.lineWidth=7;

ctx.strokeStyle="#000";

ctx.translate(250,250);

ctx.rotate(i*30*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-190);

ctx.lineTo(0,-170);

ctx.closePath();

ctx.stroke();

ctx.restore();

}

5画时钟的分或秒的刻度

//画分钟刻度

for(var i=0;i<60;i++){

ctx.save();

ctx.lineWidth=5;

ctx.strokeStyle="#000";

ctx.translate(250,250);

ctx.rotate(i*6*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-190);

ctx.lineTo(0,-180)

ctx.closePath();

ctx.stroke();

ctx.restore();

}

6、画时针

//画时针

ctx.save();

ctx.lineWidth=10;

ctx.strokeStyle="#000";

ctx.translate(250,250);

ctx.rotate(hour*30*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-120);

ctx.lineTo(0,10);

ctx.closePath();

ctx.stroke();

ctx.restore();

7、画分针

//画分针

ctx.save();

ctx.lineWidth=7;

ctx.strokeStyle="#000";

ctx.translate(250,250);

ctx.rotate(min*6*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-150);

ctx.lineTo(0,15);

ctx.closePath();

ctx.stroke();

ctx.restore();

8.画秒针

//画秒针

ctx.save();

ctx.lineWidth=5;

ctx.strokeStyle="red";

ctx.translate(250,250);

ctx.rotate(sec*6*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-160);

ctx.lineTo(0,20);

ctx.closePath();

ctx.stroke();

ctx.restore();

好了经过上述一个固定时间的时钟已经画好了，但是时间从来都不会停止的，所以还是不符合业务吧，那现在就通过setInterval循环运行函数来实现走动的时钟

setinterval('代码','间隔时间(单位毫秒)')；将上述 步骤的代码用函数drawClock封装起来，每秒钟实现一次setInterval(drawClock,1000);

时间的变量的赋值

var nowDate=new Date();

var hour=nowDate.getHours();

var min=nowDate.getMinutes();

var sec=nowDate.getSeconds();

hour=hour>12?hour-12:hour;

运行起来，秒针会动了，但是有痕迹在，需要用clearRect清除画布后，在全部重新画。

整体代码如下

浏览器不支持画布操作

var clock=document.getElementById("clock");

var ctx=clock.getContext("2d");

function drawClock(){

//清屏

ctx.clearRect(0,0,500,500);

var nowDate=new Date();

var hour=nowDate.getHours();

var min=nowDate.getMinutes();

var sec=nowDate.getSeconds();

hour=hour>12?hour-12:hour;

//画表盘

ctx.lineWidth=10;

ctx.strokeStyle="blue";

ctx.beginPath();

ctx.arc(250,250,200,0,360,false);

ctx.closePath();

ctx.stroke();

//画时针刻度

for(var i=0;i<12;i++){

ctx.save();

ctx.lineWidth=7;

ctx.strokeStyle="#000";

ctx.translate(250,250);

ctx.rotate(i*30*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-190);

ctx.lineTo(0,-170);

ctx.closePath();

ctx.stroke();

ctx.restore();

}

//画分钟刻度

for(var i=0;i<60;i++){

ctx.save();

ctx.lineWidth=5;

ctx.strokeStyle="#000";

ctx.translate(250,250);

ctx.rotate(i*6*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-190);

ctx.lineTo(0,-180)

ctx.closePath();

ctx.stroke();

ctx.restore();

}

//画时针

ctx.save();

ctx.lineWidth=10;

ctx.strokeStyle="#000";

ctx.translate(250,250);

ctx.rotate(hour*30*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-120);

ctx.lineTo(0,10);

ctx.closePath();

ctx.stroke();

ctx.restore();

//画分针

ctx.save();

ctx.lineWidth=7;

ctx.strokeStyle="#000";

ctx.translate(250,250);

ctx.rotate(min*6*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-150);

ctx.lineTo(0,15);

ctx.closePath();

ctx.stroke();

ctx.restore();

//画秒针

ctx.save();

ctx.lineWidth=5;

ctx.strokeStyle="red";

ctx.translate(250,250);

ctx.rotate(sec*6*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-160);

ctx.lineTo(0,20);

ctx.closePath();

ctx.stroke();

ctx.restore();

}

drawClock();

setInterval(drawClock,1000);