zoukankan      html  css  js  c++  java
  • Canvas绘制时钟

    准备工作 

    首先,找一张时钟的图片,就是下面这张了。

    ——来自bigger than bigger的dribbble网站,图片来源(侵删)

    第一步:创建Canvas标签

    然后就开始用canvas实现这个逼格满满的时钟吧。在html代码中插入canvas标签

    <canvas id="canvas" width="400" height="400"></canvas>

    由于浏览器对HTML5标准支持不一致,所以,通常在<canvas>内部添加一些说明性HTML代码,如果浏览器支持Canvas,它将忽略<canvas>内部的HTML,如果浏览器不支持Canvas,它将显示<canvas>内部的HTML:

    <canvas id="test-stock" width="300" height="200">
        <p>Current Price: 25.51</p>
    </canvas>

    在使用Canvas前,用canvas.getContext来测试浏览器是否支持Canvas:

    var canvas = document.getElementById('test-canvas');
    if (canvas.getContext) {
        console.log('你的浏览器支持Canvas!');
    } else {
        console.log('你的浏览器不支持Canvas!');
    }

    第二步:在Javascript中创建画布对象

    js文件中创建画布(假设我们使用的都是现代浏览器)。

    function clock() {
      var ctx = document.getElementById('canvas').getContext('2d');
    }

    先来绘制时钟表盘,我们看到这张图是带有光线阴影效果的,画成一样难度太高。于是就用颜色的渐变来让时钟看起来稍微立体一点。在canvas中用createLinearGradient来创建一个新的渐变,并用addColorStop上色,最后把颜色赋给strokeStyle。详见运用样式与颜色 by MDN

    //绘制表盘底色
    ctx.translate(200, 200); //将坐标原点移到画布中心
    ctx.rotate(-Math.PI/2); //将坐标轴逆时针旋转90度,x轴正方向对准12点方向
    var lingrad = ctx.createLinearGradient(150, 0, -150, 0); lingrad.addColorStop(0, '#242f37'); lingrad.addColorStop(1, '#48585c'); ctx.fillStyle = lingrad; ctx.beginPath(); ctx.arc(0, 0, 150, 0, Math.PI * 2, true); ctx.fill();

    比较关键的一点是画布的坐标轴x轴正方向是时钟3点钟方向,为了方便起见,我们把它逆时针旋转90度让它指向十二点钟方向。

    绘制刻度要用到旋转rotate变形 Transformations by MDN),小时刻度有12个,相邻两个刻度与圆心连线的角度就是Math.PI/6,这里用的是弧度表示,也就是30度。那么我们就用for循环来画出小时的刻度。

    for (var i = 0; i < 12; i++) {
      ctx.beginPath();
      ctx.strokeStyle = '#fff';
      ctx.lineWidth = 3;
      ctx.rotate(Math.PI / 6);
      ctx.moveTo(140, 0);
      ctx.lineTo(120, 0);
      ctx.stroke();
    }

    同理,分钟的刻度也一样。

    ctx.beginPath();
    for (i = 0; i < 60; i++) {
      if (i % 5 !== 0) { //去掉与小时刻度重叠的部分
        ctx.beginPath();
        ctx.strokeStyle = '#536b7a';
        ctx.lineWidth = 2;
        ctx.moveTo(140, 0);
        ctx.lineTo(130, 0);
        ctx.stroke();
      }
      ctx.rotate(Math.PI / 30);
    }

    表盘大致画好了,刻度也画好了,接下来就是绘制指针并让它指向正确的时间,是不是?不就就是画一条直线么。关键是指针rotate的角度是多少呢?其实也是比较简单的。先获取当前的时间,把小时转换为12小时制的。

    var now = new Date(),
        sec = now.getSeconds(),
        min = now.getMinutes(),
        hr = now.getHours();
    hr = hr > 12 ? hr - 12 : hr;

    那么,时针的位置就是(相对于x轴正方向转过的角度):

    ctx.rotate(hr * (Math.PI / 6) + min * (Math.PI / 360) + sec * (Math.PI / 21600));

    同理,分针和秒针的位置:

    ctx.rotate(min * (Math.PI / 30) + sec * (Math.PI/1800)); //分针
    ctx.rotate(sec * (Math.PI /30)); //秒针

    最后,最关键的让指针转动起来,这里要用到的是requestAnimationFrame方法,用来重绘页面,得到连贯逐帧的动画,实现最佳的动画效果。

    window.requestAnimationFrame(callback);

    这个callback就是我们的绘制时钟的clock()函数。需要注意的是每次执行完requestAnimationFrame后需要清除画布,不然出现重叠交错的现象,我们把它放在clock函数开始的地方。

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    到这里,动画效果图如下:

     
  • 相关阅读:
    背水一战 Windows 10 (90)
    背水一战 Windows 10 (89)
    背水一战 Windows 10 (88)
    背水一战 Windows 10 (87)
    背水一战 Windows 10 (86)
    背水一战 Windows 10 (85)
    背水一战 Windows 10 (84)
    背水一战 Windows 10 (83)
    背水一战 Windows 10 (82)
    背水一战 Windows 10 (81)
  • 原文地址:https://www.cnblogs.com/ning123/p/11290747.html
Copyright © 2011-2022 走看看