canvas实现钟表效果

Html

Css

#mycanvas {
	border:1px solid gold;
	margin:100px auto 0;
	display:block;
	background-color:cornflowerblue;
}

//获取canvas
var canvas = document.getElementById('mycanvas');
//获取渲染上下文
var con = canvas.getContext('2d');

function hanshu() {
    con.clearRect(0, 0, canvas.width, canvas.height);
    //开始绘制
    con.beginPath();
    //线宽
    con.lineWidth = 5;
    //画圆
    con.arc(250, 250, 200, 0, Math.PI * 2, false);
    //描边样式
    con.strokeStyle = 'red';
    //描边填充
    con.stroke();
    //结束绘制
    con.closePath();
    //绘制时针刻度

for (var i = 0; i < 12; i++) {
        //保存原始坐标轴
        con.save();
        //平移坐标轴到圆心位置
        con.translate(250, 250);
        //旋转
        con.rotate(Math.PI / 180 * 30 * i);
        //设置描边样式
        con.strokeStyle = 'black';
        //设置线宽
        con.lineWidth = 7;
        //开始绘图
        con.beginPath();
        //设置起始点
        con.moveTo(0, -170);
        //设置结束点
        con.lineTo(0, -190);
        //描边填充
        con.stroke();
        //结束绘图
        con.closePath();
        //恢复到原始坐标轴
        con.restore();

}
    //绘制秒针刻度

for (var i = 0; i < 60; i++) {
        //保存原始坐标轴
        con.save();
        //平移坐标轴到圆心位置
        con.translate(250, 250);
        //旋转
        con.rotate(Math.PI / 180 * 6 * i);
        //设置描边样式
        con.strokeStyle = 'black';
        //设置线宽
        con.lineWidth = 5;
        //开始绘图
        con.beginPath();
        //设置起始点
        con.moveTo(0, -180);
        //设置结束点
        con.lineTo(0, -190);
        //描边填充
        con.stroke();
        //结束绘图
        con.closePath();
        //恢复到原始坐标轴
        con.restore();
    }

//获取本地时间
    var dateTime = new Date();
    //获取小时
    var hour = dateTime.getHours();
    //获取分
    var minute = dateTime.getMinutes();
    //获取秒
    var second = dateTime.getSeconds();
    hour = hour + minute / 60;
    hour = hour > 12 ? hour - 12 : hour;
    console.log(hour);
    console.log(minute);
    console.log(second);

//绘制时针
    //保存原始坐标轴
    con.save();
    //平移坐标轴到圆心位置
    con.translate(250, 250);
    //时针旋转角度
    con.rotate(hour * 30 * Math.PI / 180 - Math.PI * 0.5);
    //开始绘制
    con.beginPath();
    con.lineWidth = 7;
    con.strokeStyle = randomColor();
    con.moveTo(-15, 0);
    con.lineTo(100, 0)
    con.stroke();
    //结束绘制
    con.closePath();
    //恢复到原始坐标轴
    con.restore();

//绘制分针
    //保存原始坐标轴
    con.save();
    //平移坐标轴到圆心位置
    con.translate(250, 250);
    con.rotate(minute * 6 * Math.PI / 180 - Math.PI * 0.5);
    con.beginPath();
    con.lineWidth = 5;
    con.strokeStyle = randomColor();
    con.moveTo(-20, 0);
    con.lineTo(130, 0)
    con.stroke();
    con.closePath();
    //恢复到原始坐标轴
    con.restore();

//绘制秒针
    //保存原始坐标轴
    con.save();
    //平移坐标轴到圆心位置
    con.translate(250, 250);
    con.rotate(second * 6 * Math.PI / 180 - Math.PI * 0.5);
    con.beginPath();
    con.lineWidth = 3;
    con.strokeStyle = randomColor();
    con.moveTo(-25, 0);
    con.lineTo(160, 0)
    con.stroke();
    con.closePath();
    con.beginPath();
    con.strokeStyle = randomColor();
    con.fillStyle = randomColor();
    con.arc(140, 0, 5, Math.PI * 2, false);
    con.stroke();
    con.fill();
    con.closePath();
    //恢复到原始坐标轴
    con.restore();

//美化
    //保存原始坐标轴
    con.save();
    //平移坐标轴到圆心位置
    con.translate(250, 250);
    con.beginPath();
    con.fillStyle = randomColor();
    con.strokeStyle = randomColor();
    con.arc(0, 0, 6, 0, Math.PI * 2, false);
    con.stroke();
    con.fill();
    con.closePath();
    //恢复到原始坐标轴
    con.restore();
}
hanshu();

setInterval(hanshu, 1000);

//定义随机颜色函数
function randomColor() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas实现钟表效果



代码描述：练习用canvas实现的钟表

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

丿嗨丶请叫我营

相关代码

canvas实现钟表效果

最新