canvas可以用极少的代码实现酷炫的功能。
今天tity带大家实现一个简单的时钟效果,先铺代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>时钟</title>
<style type="text/css">
canvas {
display: block;
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid #ccc;
}
</style>
<script type="text/javascript">
(function(){
var canvas = null;
var ctx = null;
var cw = 0;
var ch = 0;
window.addEventListener('load',function(){
canvas = document.getElementById('sample');
ctx = canvas.getContext('2d');
cw = parseInt(canvas.width);
ch = parseInt(canvas.height);
ctx.translate(cw/2, ch/2);
draw_watch()
},false);
function draw_watch(){
ctx.clearRect(-cw/2, -ch/2, cw, ch);
var len = Math.min(cw, ch)/2;
var tlen = len * .85;
ctx.font = '14px "Arial"';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for(var i=0; i<12; i++){
var tag1 = Math.PI * 2 * (3 - i) / 12;
var tx = tlen * Math.cos(tag1);
var ty = -tlen * Math.sin(tag1);
ctx.fillText(i, tx, ty);
}
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
if(h>12){
h = h - 12;
}
var angle1 = Math.PI * 2 * ( 3 - ( h + m / 60 ) ) / 12;
var length1 = len * .5;
var width1 = 5;
var color1 = '#000';
drawhand(angle1, length1, width1, color1);
var angle2 = Math.PI * 2 * ( 15 - ( m + s / 60 ) ) / 60;
var length2 = len * .7;
var width2 = 3;
var color2 = '#555';
drawhand(angle2, length2, width2, color2);
var angle3 = Math.PI * 2 * ( 15 - s ) / 60;
var length3 = len * .8;
var width3 = 1;
var color3 = '#a00';
drawhand(angle3, length3, width3, color3);
setTimeout(draw_watch, 1000);
}
function drawhand(angle, len, width, color){
var x = len * Math.cos(angle);
var y = -len * Math.sin(angle);
ctx.strokeColor = color;
ctx.lineWidth = width;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(x, y);
ctx.stroke();
}
})()
</script>
</head>
<body>
<canvas id="sample"></canvas>
</body>
</html>
运行后的效果为:
代码解析:
从整体上看,页面代码十分简单,在body标签中只有一个canvas标签,然后header中有两部分,第一部分是canvas的样式,第二部分是实现canvas的JS。
接下来我们重点关注JS部分。
JS中是一个自执行的函数,函数中包含了四部分的内容:
第一部分是基本参数的重置。
第二部分是将绘图的中心移到canvas中心,即向右移动宽度的一半,向下移动高度的一半。
第三部分的draw_watch函数是用来绘制时钟的函数,主要作用是计算指针长度,绘制刻度盘,同时获取当前的时分秒后,来绘制时针、分针、秒针。
第四部分就是指针绘制函数,可以在此部分设置指正颜色、粗细、形状等。
以上就是一个简单的canvas时钟实现效果。关于时钟的细化大家可以做更多的探索。