Loading

Javascript学习--时钟 

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>时钟</title>
        <style type="text/css">
            div {
                text-align: center;
                margin-top: 200px;
            }
            /*#clock{border:1px solid #ccc}*/
        </style>

    </head>

    <body>
        <div>
            <canvas id="clock" width="500px" height="500px"></canvas>
        </div>
        <script type="text/javascript" src="js/clockEffect.js"></script>
    </body>

</html>
var clock = document.getElementById('clock');
var ctx = clock.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;
var rem = width / 300; //比例

function draw() {
    ctx.save(); //1、保存当前环境的状态
    ctx.translate(r, r); //改变画布圆点位置到（r,r）（默认左上角是（0，0））
    ctx.beginPath();
    ctx.lineWidth = 10 * rem;
    ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false); //false默认顺时针，可以不写
    ctx.stroke();
    //小时数
    var arr = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
    ctx.font = 30 * rem + 'px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    arr.forEach(function(num, i) {
        var rad = 2 * Math.PI / 12 * i; //弧度
        var x = Math.cos(rad) * (r - 35 * rem); //坐标
        var y = Math.sin(rad) * (r - 35 * rem);
        ctx.fillText(num, x, y);
    })
    //秒针的60个点
    for(var i = 0; i < 60; i++) {
        var rad = 2 * Math.PI / 60 * i; //弧度
        var x = Math.cos(rad) * (r - 15 * rem); //坐标
        var y = Math.sin(rad) * (r - 15 * rem);
        ctx.beginPath();
        if(i % 5 === 0) {
            ctx.fillStyle = '#000';
            ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI);
        } else {
            ctx.fillStyle = '#ccc';
            ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI);
        }
        ctx.fill();
    }
}
//时针
function drawHour(hour, minute) {
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 12 * hour;
    var mrad = 2 * Math.PI / 12 / 60 * minute;
    ctx.rotate(rad + mrad);
    ctx.lineWidth = 6 * rem;
    ctx.lineCap = 'round';
    ctx.moveTo(0, 10 * rem);
    ctx.lineTo(0, -r + 80 * rem);
    ctx.stroke();
    ctx.restore();
}
//分针
function drawMinute(minute) {
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 60 * minute;
    ctx.rotate(rad);
    ctx.lineWidth = 4 * rem;
    ctx.lineCap = 'round';
    ctx.strokeStyle = 'yellow';
    ctx.moveTo(0, 10 * rem);
    ctx.lineTo(0, -r + 50 * rem);
    ctx.stroke();
    ctx.restore();
}
//秒针
function drawSecond(second) {
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 60 * second;
    ctx.rotate(rad);
    ctx.fillStyle = 'red';
    ctx.moveTo(-2 * rem, 20 * rem);
    ctx.lineTo(2 * rem, 20 * rem);
    ctx.lineTo(1 * rem, -r + 20 * rem);
    ctx.lineTo(-1 * rem, -r + 20 * rem);
    ctx.fill();
    ctx.restore();
}
//中间圆点
function drawDot() {
    ctx.beginPath();
    ctx.fillStyle = '#fff';
    ctx.arc(0, 0, 3 * rem, 0, 2 * Math.PI);
    ctx.fill();
}

function drawClock() {
    var now = new Date(),
        hour = now.getHours(),
        minute = now.getMinutes(),
        second = now.getSeconds();
    ctx.clearRect(0, 0, width, height); //清除整个画布，重画
    draw();
    drawHour(hour, minute);
    drawMinute(minute);
    drawSecond(second);
    drawDot();
    ctx.restore(); //2、返回之前保存过的路径状态和属性（还原圆点）
}
setInterval(drawClock, 1000);

//绘制时钟用到的canvas属性和方法
//1、fillStyle：设置或返回用于填充绘画的颜色、渐变或模式
//2、lineCap：设置或返回线条的结束端点样式。（butt默认/round向线条的每个末端添加圆形线帽/square向线条的每个末端添加正方形线帽）
//3、lineWidth：设置或返回当前的线条宽度。示例：ctx.lineWidth=10
//4、fillRect()：绘制“被填充”的矩形。context.fillRect(x,y,width,height)
//5、clearRect()：在给定的矩形内清除指定的像素。context.clearRect(x,y,width,height)
//6、fill()：填充当前的图像（路径）
//7、stroke()：实际地绘制出通过moveTo()和lineTo()方法定义的路径
//8、beginPath()、closePath():开始和结束一条路径
//9、moveTo()、lineTo()：绘制“已填充”的矩形
//10、arc()：画圆。context.arc(x,y,r,sAngle,eAngle,counterclockwise)
//11、translate()：改变画布圆点位置
//12、rotate()：旋转绘图
//13、fillText()：在画布上绘制“被填充”的文本。context.fillText(text,x,y,maxWidth)
//14、font:字体属性
//      textAlign:水平对齐方式
//      textBaseline:垂直对齐方式

 

posted @ 2017-11-20 12:57  眾尋  阅读(418)  评论(0)  编辑  收藏  举报