JavaScript canvas实现七彩时钟效果

利用canvas写七彩时钟!

1、题目

(1)、拿到一个时钟案例要求在页面上画出一个时钟,获取当前电脑的系统时间?(样式不限利用h5实现)

2、思路

(1)、首先我们要充分了解到canvas画布元素里面的图形以及线段的画法,圆的画法,时针、分针、秒针的画法;
(2)、其次,是要在页面布局渲染出一个时钟的图形,画出刻度的位置,以及时针分针秒针的位置的静态效果,方便后面定时器来实现动态效果;
(3)、做好这些工作后,最难的地方是如何将时针分针和秒针与刻度一一对应,那么我们就要用到圆的弧度制,让定时器每隔一秒钟调用一下时钟函数;
(4)、实现这些效果,为了不出现bug要及时的保存画布,以及清除画布; (5)、在用JavaScript渲染到页面即可实现功能;

3、效果展示图

4、写法

获取时间:

获取当前的系统时间:利用时间对象获取当前准确的时间,由于时间不是整数所以我们就要将时间转化为浮点型小数,为了便于之后定时器的调用,当前没有13、14、15…所以我们利用三元表达式将24小时制转化为12小时制。

由于分刻度和时刻度一样,这里我就以时刻度为例简单说一下:

  • 利用for循环循环12次,因为有12个时针刻度,便于下面的刻度绘制;
  • 设置画布的中心点为圆的原点,转动画布;
  • 一个正圆是360度,平分为12分刚好每隔刻度需要转动30弧度;画布每次转动30弧度,转动12次结束;
  • 绘制刻度,给它一个随机颜色的样式;

时针绘制(时针和分针基本一样):

  • 首先需要保存画布状态,设置线条的粗细和颜色;
  • 重设画布的原点,以画布中心为原点;
  • 时针每次需要转动30弧度,根据秒针和分针的转动来的;
  • 绘制时针线段,渲染到时针页面;

表盘中心绘制:

  • 找到画布圆心的位置;
  • 在圆心位置画出半径为4的一个实心原点作为时分秒三个指针的交点(中心点);

绘制文字时间:

上面已经获取到了系统时间,我们只需要将其设置好样式和设置位置渲染到时钟页面即可!

5、参考代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="clock" width="500" height="500" ></canvas>
    <script>
        var canvas=document.getElementById("clock");
        var context=canvas.getContext("2d");

        // canvas.style.backgroundColor=getRandom()
        function drawClock(){
        //清除画布
        context.clearRect(0,0,canvas.width,canvas.height)
        //获取时间
        var now=new Date()
        var second=now.getSeconds()
        var minute=now.getMinutes()
        var hour1=now.getHours()
        var hour=hour1+minute/60;   //将24小时制转成12小时制,且为浮点型
            hour=hour>12?hour-12:hour;
        var time=now.toLocaleString()   //获取全部时间

        //绘制表盘
        context.beginPath() //开始路径
        context.strokeStyle=getRandom()   //线条颜色
        context.lineWidth=8 //线条粗细
        context.arc(250,250,200,0,360,false)
        context.stroke()
        context.closePath() //结束路径

        //绘制时刻度
        for(var i=0;i<12;i++){
            context.save()  //保存当前画布状态
            context.translate(250,250)  //重设画布的原点,以画布中心为原点
            context.lineWidth=3;
            context.rotate(Math.PI/180*30*i)    //设置画布旋转角度,参数是弧度Math.PI/180*30
            context.beginPath()
            context.strokeStyle=getRandom()
            context.moveTo(0,-180)  //起始位置
            context.lineTo(0,-195)  //结束位置
            context.stroke()
            context.closePath()
            context.restore()

        }
        //绘制分刻度
        for(var i=0;i<60;i++){
            context.save()  //保存当前画布状态
            context.translate(250,250)  //重设画布的原点,以画布中心为原点
            context.lineWidth=1;
            context.rotate(Math.PI/180*6*i)    //设置画布旋转角度,参数是弧度Math.PI/180*30
            context.beginPath()
            context.strokeStyle=getRandom()
            context.moveTo(0,-188)  //起始位置
            context.lineTo(0,-195)  //结束位置
            context.stroke()
            context.closePath()
            context.restore()

        }
        //时针
        context.save()
        context.lineWidth=5;
        context.strokeStyle=getRandom()
        context.translate(250,250)
        context.rotate(hour*30*Math.PI/180)
        context.beginPath()
        context.moveTo(0,10)
        context.lineTo(0,-100)
        context.stroke()
        context.closePath()
        context.restore()

        //分针
        context.save()
        context.lineWidth=3;
        context.strokeStyle=getRandom()
        context.translate(250,250)
        context.rotate(minute*6*Math.PI/180)
        context.beginPath()
        context.moveTo(0,15)
        context.lineTo(0,-130)
        context.stroke()
        context.closePath()
        context.restore()

         //秒针
        context.save()
        context.lineWidth=1;
        context.strokeStyle=getRandom()
        context.translate(250,250)
        context.rotate(second*6*Math.PI/180)
        context.beginPath()
        context.moveTo(0,15)
        context.lineTo(0,-170)
        context.stroke()
        context.closePath()
        context.restore()

        //表盘中心
        context.beginPath()
        context.lineWidth=1;
        context.fillStyle="red"
        context.arc(250,250,4,0,360,false)
        context.fill()
        context.closePath()

        //绘制文字时间
        context.font="18px 宋体 Bold"
        context.fillStyle=getRandom()
        context.fillText(time,160,150)
        }
        drawClock()
        setInterval(drawClock,1000)

        function getRandom(){
            var col="#";
            for(var i=0;i<6;i++){
              col+=Math.round(Math.random()*16).toString(16)
            }
            return col
        }

    </script>
</body>
</html>

6、总结

在学习canvas的过程中我们需要充分了解画布元素中的绘制方法,然后多多联系,才能将这些方法了然于胸,用起来也就不那么生疏了,废话不多说,大家快来尝试一下吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JavaScript html5 canvas绘制时钟效果(二)

    对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了.今天我们就用canvas来做一个小小的时钟.完整的代码在这里https://github.com/wwervin72/HTML5-Clock. 那么首先在这个页面里面我使用了两个canvas,一个用来绘制静态的时钟表盘和刻度,另一个用来绘制时钟的三个指针,然后用定位让他们重合到一起.然后这里没什么

  • JS+Canvas绘制动态时钟效果

    本文实例为大家分享了Canvas绘制动态时钟效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #mycanvas{ position: absolute; left:50%; margin-left:-250px; border:5px solid #

  • js+html5实现canvas绘制网页时钟的方法

    本文实例讲述了js+html5实现canvas绘制网页时钟的方法,画的是一个可用于网页的.带摆的钟表,可以通过按钮调整其大小和位置,具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <script type="tex

  • js Canvas实现圆形时钟教程

    阅读本文需要一点关于canvas基本用法的基础,本文实例为大家分享了HTML5 Canvas实现圆形时钟简易教程 第一步:新建一个最简单的html文件,并且在<body>标签中定义元素canvas. canvas.html <html> <head> <title>Canvas clock tutorial</title> </head> <body> <canvas id="clock" wid

  • javascript结合Canvas 实现简易的圆形时钟

    之前学习了下html5中的canvas元素,为了练练手就实现了一个简易的时钟.时钟本身并不复杂,也没有使用图片进行美化,不过麻雀虽小五脏俱全,下面就与大家分享一下: 演示效果: html代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  • vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给定合理的帧数,不断的清除画布,再重绘图形,即呈现出动画效果. 让我们先看下效果 说明:此gif清晰度很低,因为转成gif图的时候,质量受损,帧数减少,所以倒计时转到红色时候看起来变的很模糊.但是实际在浏览器上效果全程都是很清晰和连贯的 使用 npm npm install vue-canvas-co

  • JS+Canvas绘制时钟效果

    本文实例为大家分享了使用canvas绘制时钟的具体代码,供大家参考,具体内容如下 1. clock.html    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Description" content=""> <title>canvas时钟</t

  • JavaScript html5 canvas绘制时钟效果

    本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

  • canvas绘制表盘时钟

    话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas绘制表盘</title> </head> <body> <canvas id='box' width="500" height="500" > 您的

  • html5 canvas js(数字时钟)实例代码

    复制代码 代码如下: <!doctype html><html>    <head>        <title>canvas dClock</title>    </head>    <body>        <canvas id = "clock" width = "500px" height = "200px">            您的浏览

随机推荐