JavaScript html5 canvas绘制时钟效果

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：661 次日期：2016-08-04 15:07:54

温馨提示：小编为您整理了“JavaScript html5 canvas绘制时钟效果”,方便广大网友查阅！

本文实例讲述了JavaScript+html5 canvas绘制时钟效果。分享给大家供大家参考，具体如下：

HTML部分：

<!DOCTYPE html>

<head>

<title>canvas绘图</title>

</head>

</body>

</html>

JavaScript部分：

function init(){

var canvas = document.getElementById("canvas"),

context = canvas.getContext("2d");

setInterval(function(){draw(canvas, context)},1000);

}

function draw(canvas, context){

var x = canvas.width,

y = canvas.height,

r = Math.min(x/2, y/2);

context.clearRect(0, 0, x, y); //清除绘画历史

//绘画钟框

context.fillStyle = "#f1f1f1";

drawCircle(context, x, y, r);

//绘画文字

var tx = x/2,ty = y/2,tr = 0.8*r;

context.font = "bold 12px 微软雅黑";

context.fillStyle = "#000";

drawText(context, "1", tx + 0.5*tr,ty - 0.866*tr);

drawText(context, "2", tx + 0.866*tr, ty - 0.5*tr);

drawText(context, "3", tx + tr, ty);

drawText(context, "4", tx + 0.866*tr, ty + 0.5*tr);

drawText(context, "5", tx + 0.5*tr, ty + 0.866*tr);

drawText(context, "6", tx, ty + tr);

drawText(context, "7", tx - 0.5*tr, ty + 0.866*tr);

drawText(context, "8", tx - 0.866*tr, ty + 0.5*tr);

drawText(context, "9", tx - tr, ty);

drawText(context, "10", tx - 0.866*tr, ty - 0.5*tr);

drawText(context, "11", tx - 0.5*tr, ty - 0.866*tr);

drawText(context, "12", tx, ty - tr);

//获取当前时间

var date = new Date(),

h = date.getHours(),

m = date.getMinutes(),

s = date.getSeconds(),

angleH = (360/12)*Math.PI/180,

angleM = (360/60)*Math.PI/180

context.strokeSyle = "#000";

//绘制时刻度

drawScale(context, x, y, r, angleH, -0.88*r, -0.96*r, 3);

//绘制分刻度

drawScale(context, x, y, r, angleM, -0.93*r, -0.96*r, 1);

//绘画时分秒针

drawCircle(context, x, y, 3);

drawNeedle(context, x, y, r, h*angleH + m*angleM/12, -0.5*r);

drawNeedle(context, x, y, r, m*angleM + s*angleM/60, -0.6*r);

drawNeedle(context, x, y, r, s*angleM, -0.75*r);

}

//绘画圆

function drawCircle(context, x, y, r){

context.save();

context.beginPath();

context.arc(x/2, y/2, r, 0, Math.PI*2, 0);

context.fill();

context.closePath();

context.restore();

}

//绘画文字方法

function drawText(context, text, x, y){

context.save();

x -= (context.measureText(text).width/2);

y += 4;

context.translate(x, y);

context.fillText(text, 0, 0);

context.restore();

}

//绘制刻度方法

function drawScale(context, x, y, r, rotate, start, end, lineWidth){

context.save();

context.beginPath();

context.translate(x/2,y/2);

context.lineWidth = lineWidth;

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

context.rotate(rotate);

context.moveTo(0, start);

context.lineTo(0, end);

}

context.closePath();

context.stroke();

context.restore();

}

//绘画时分秒针方法

function drawNeedle(context, x, y, r, rotate, line){

context.save();

context.translate(x/2,y/2);

context.beginPath();

context.rotate(rotate);

context.moveTo(0, 0.1*r);

context.lineTo(0, line);

context.closePath();

context.stroke();

context.restore();

}

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：详解Wondows下Node.js使用MongoDB的环境配置

下一篇：javascript使用Promise对象实现异步编程

手机网站地址：JavaScript html5 canvas绘制时钟效果

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！