canvas时钟案例

一、时钟案例

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟案例</title>
    <style type="text/css">
        div {text-align: center;margin-top: 250px;}
        #clock{border: 1px solid #ccc; }
    </style>
</head>
<body>
    <div><canvas id="clock" width="300" height="300"></canvas></div>
    <script src="js/clock.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

/* 绘制时钟 */
var canvas = document.getElementById('clock');
//画笔
var ctx = canvas.getContext('2d');
//获取到画布的宽高
var width = ctx.canvas.width;
var height = ctx.canvas.height;
//定义半径
var r = width/2;
//绘制表盘
function drawBackground() {
    ctx.save();
    
    ctx.translate(r,r);
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.arc(0,0,r-ctx.lineWidth/2,0,Math.PI*2,false);
    ctx.closePath();
    ctx.stroke();

    // 刻度（时刻度、分刻度）
	// 绘制时刻度
    var arr = [3,4,5,6,7,8,9,10,11,12,1,2];
    //遍历出各刻度值
    arr.map(function(num,i){
        //确定每刻度所占的弧度
        var rad = 2*Math.PI/12 *i;
        //确定各个刻度点的x,y坐标
        var x = Math.cos(rad)*(r-30);
        var y = Math.sin(rad)*(r-30);
        //设置字体
        ctx.font="18px Arial";
        ctx.textAlign="center"//左右对齐
		ctx.textBaseline="middle"//水平对齐
        // 绘制文字(小时)
        ctx.fillText(num, x, y);
    })
    //绘制出分钟数的刻度线
    for (var i = 0; i < 60; i++){
        //计算出每个刻度的弧度
        var rad = 2*Math.PI/60 *i;
        ctx.beginPath();
        
        //确定刻度点的x ,y
        var x = Math.cos(rad)*(r-18);
        var y = Math.sin(rad)*(r-18);
        if(i%5==0){
            ctx.fillStyle="#000"
            //开始画
            ctx.arc(x,y,2,0,2*Math.PI,false);
        }else{
            ctx.fillStyle="#ccc"
            //开始画
            ctx.arc(x,y,2,0,2*Math.PI,false);
        }
        //绘制
        ctx.fill();
    }
}

//第二部分 
//开始绘制时针
function drawHour(hour,minute){
    ctx.save();
    var rad = 2*Math.PI / 12 * hour;
    var mad = 2*Math.PI / 12 / 60 * minute;
    ctx.rotate(rad+mad);
    
    ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.lineWidth = 6;
    ctx.moveTo(0,10);
    ctx.lineTo(0,-r/2);

    ctx.stroke();
    ctx.restore();
}
//开始绘制分针
function drawMinute(minute){
    ctx.save();
    // 每分钟的弧度
    var rad = 2*Math.PI / 60 * minute
    // 设置旋转
    ctx.rotate(rad)

    ctx.beginPath();
    ctx.lineCap = 'round';
    ctx.lineWidth = 3
    ctx.moveTo(0,10);
    ctx.lineTo(0,-r+60);

    ctx.stroke();
    ctx.restore();
}
//开始绘制秒针
function drawSecond(second){
    ctx.save();
    // 每秒钟的弧度
    var rad = 2*Math.PI / 60 * second
    // 设置旋转
    ctx.rotate(rad)
    ctx.beginPath();
    ctx.fillStyle="red"
    // 移动起点
    ctx.moveTo(-2,20)
    // 从起点绘制 -号是方向向上
    ctx.lineTo(2,20);
    ctx.lineTo(1,-r+20)
    ctx.lineTo(-1,-r+20)

    ctx.fill();
    ctx.restore();
}
// 绘制时钟的圆点
function drawDot(){
	ctx.beginPath()
	ctx.fillStyle="#fff"
	ctx.arc(0,0,5,0,2*Math.PI,false);
	ctx.fill()
}
//绘制
function draw(){
	// 清除画布
	ctx.clearRect(0,0,width,height)
	// 获取当前的时间
	var now =new Date();
	var hour= now.getHours()
	var min= now.getMinutes()
	var second= now.getSeconds()
	drawBackground();
	drawHour(hour,min)
	drawMinute(min);
	drawSecond(second);
	drawDot()
	ctx.restore()
}
setInterval(draw,1000);//使用定时器执行整个绘画方法