使用HTML5 Canvas制作时钟理解马克

首先是html页面

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 时钟</title>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
      <style>
        .clocks {
          height: 500px;
          margin: 25px auto;
          position: relative;
          width: 500px;
        }
      </style>
    </head>
    <body>
        <header>
            <h2>HTML5 时钟</h2>
        </header>
        <div class="clocks">
            <canvas id="canvas" width="500" height="500"></canvas>
        </div>
    </body>
</html>

然后是js

// inner variables
//定义全局变量
var canvas, ctx;
var clockRadius = 250;
var clockImage;

// draw functions :
function clear() { // clear canvas function
  //clearRect() 方法清空给定矩形内的指定像素。
  //参数:要清除的矩形左上角的 x 坐标,y坐标,宽度,高度,以像素计
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // main drawScene function
  //清空画布
    clear(); // clear canvas

    // get current time
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    hours = hours > 12 ? hours - 12 : hours;
    var hour = hours + minutes / 60;
    var minute = minutes + seconds / 60;

    // save current context
    ctx.save();

    // draw clock image (as background)
    ctx.drawImage(clockImage, 0, 0, 500, 500);
//translate() 方法重新映射画布上的 (0,0) 位置。
    ctx.translate(canvas.width / 2, canvas.height / 2);
  //beginPath() 方法开始一条路径,或重置当前的路径。
    ctx.beginPath();

    // draw numbers
    ctx.font = '36px Arial';
    ctx.fillStyle = '#000';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    for (var n = 1; n <= 12; n++) {
        var theta = n* (Math.PI * 2) / 12;//夹角π=180°
        var x = clockRadius * 0.7 * Math.sin(theta);//x坐标
        var y = -clockRadius * 0.7 * Math.cos(theta);//y坐标
        ctx.fillText(n, x, y);
    }
  /*官网是这样写的,原因是坐标右下方是正正区所以要n-3,要不然数字就乱了
  for (var n = 1; n <= 12; n++) {
        var theta = (n - 3) * (Math.PI * 2) / 12;
        var x = clockRadius * 0.7 * Math.cos(theta);
        var y = clockRadius * 0.7 * Math.sin(theta);
        ctx.fillText(n, x, y);
    }
  */

    // draw hour
    ctx.save();
    var theta = (hour-3)* 2 * Math.PI / 12;
    ctx.rotate(theta);//相差180°
    ctx.beginPath();
        //画一条从起始位置到终点位置的线
    ctx.moveTo(-15, -5);//开始位置(-15,-5)
    ctx.lineTo(-15, 5);//到达位置(-15,5)
    ctx.lineTo(clockRadius * 0.5, 1);//再画一条终点位置在(clockRadius * 0.5, 1)的
    ctx.lineTo(clockRadius * 0.5, -1);//再画一条终点位置在(clockRadius * 0.5, -1)的
        //大致出来了一个针的形状
    ctx.fill();//用颜色填充,默认黑色  
  //canvas.save();和canvas.restore();是两个相互匹配出现的,
  //作用是用来保存画布的状态和取出保存的状态的。restore取出为了避免后续的元素被影响到
    ctx.restore();


    // draw minute(同理)
    ctx.save();
    var theta = (minute-15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -4);
    ctx.lineTo(-15, 4);
    ctx.lineTo(clockRadius * 0.8, 1);
    ctx.lineTo(clockRadius * 0.8, -1);
    ctx.fill();
    ctx.restore();

    // draw second(同理)
    ctx.save();
    var theta = (seconds-15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -3);
    ctx.lineTo(-15, 3);
    ctx.lineTo(clockRadius * 0.9, 1);
    ctx.lineTo(clockRadius * 0.9, -1);
    ctx.fillStyle = '#0f0';//绿色
    ctx.fill();
    ctx.restore();

    ctx.restore();
}

// initialization
$(function(){
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    // var width = canvas.width;
    // var height = canvas.height;

clockImage = new Image();
clockImage.src = 'https://static.runoob.com/images/mix/125855_nnla_89964.png';
        //setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
    setInterval(drawScene, 1000); // loop drawScene
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值