资讯专栏INFORMATION COLUMN

使用Canvas绘制简单的时钟控件

trilever / 981人阅读

摘要:有了,我们就再也不需要了,直接使用完成绘制。绘制原点开始时钟开始时钟我们将当前时间绘制到始终上面即可需要注意的是,在绘制之前需要将之前绘制的东西清除掉。

Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表、动画等。
没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互。有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制。

基本使用

在html源码中只要像普通标签那样使用即可,比如下面的示例,但是在一些老旧的浏览器在中是不支持canvas的,因此我们常在canvas标签中提示用户,具体代码如下所示。

    
        您的浏览器不支持canvas,请尝试更新浏览器
    

或者使用JS脚本来进行检测,使用JavaScript代码检测是否支持canvas的代码示例如下:

    var myCanvas = document.getElementById("myCanvas");
    if (myCanvas.getContext) {
        myCanvas.log("你的浏览器支持Canvas!");
    } else {
        myCanvas.log("你的浏览器不支持Canvas!");
    }

开始绘制

由于绘制canvas通常代码需要比较多,我们常常使用引用js的方式来绘制canvas,这里我们也是引入js文件来操作canvas,HTML源码如下所示

    
    
    
        
        学习Canvas绘制始终效果
        
    
    
    
        您的浏览器不支持Canvas,请尝试更新浏览器
    
    
    
    

创建js文件

根据实际的需要创建js文件,这里我引入的地址是js/canvas.js,因此需要和HTML源码文件同级下创建js文件夹,然后再js文件夹中创建canvas.js文件。

绘制测试示例

绘制效果如下

动态效果

  • 查看动态时钟效果

预备代码

这里保持一些全局变量,方便后面使用的

    //获取canvas的上下文环境
    var myCanvas = document.getElementById("myCanvas")
    var ctx = myCanvas.getContext("2d")
    //获取canvas的宽度和高度
    var canvasWidth = myCanvas.width
    var canvasHeight = myCanvas.height

绘制背景

我们首先绘制背景,分析背景可以看到,他是由一个大的黑色与圆圈包裹,里面有一个灰色的略小的圆圈,在灰色圆圈的周围均匀分布着时钟点,这些时钟点每逢5的倍数的时候突出显示,否则就是灰色显示,这就是我们的需求,具体注释在代码中可以详细看到。

    //开始绘制背景
    function drawBackground() {
        //未防止当前画布环境被破坏,因此我们保存当前的绘制环境
        ctx.save()
        //开始绘制路径
        ctx.beginPath()
        //配置绘制颜色,我们首先绘制的是黑色圆圈,因此我们配置为黑色
        ctx.strokeStyle = "#000000"
        //绘制宽度为6个像素
        ctx.lineWidth = 6
        //开始绘制圆,圆心未知是宽和高的一半,半径是宽度的一半减去圆圈的宽度
        //这里最后的两个参数需要注意
        //指的是绘制圆圈的起点和绘制的弧度
        //我们从0点开始绘制然后绘制2*PI个弧度,也就是一个正圆
        //这里的点是从x轴正方向开始的
        ctx.arc(canvasWidth/2,canvasHeight/2,canvasHeight/2-3,0,2*Math.PI)
        //配置完成,开始绘制
        ctx.stroke()

        //同样的需求开始绘制灰色的圆圈
        ctx.beginPath()
        ctx.strokeStyle = "#CCCCCC"
        ctx.lineWidth = 1
        ctx.arc(canvasWidth/2,canvasHeight/2,(canvasWidth/2-15),0,2*Math.PI)
        ctx.stroke()

        //将原点从左上角0,0移动到中心位置
        ctx.translate(canvasWidth/2,canvasHeight/2)

        //需要现实的数字
        //这是可以看到,数字是从3开始的,也验证了我们的之前说的绘制从x轴正方向开始
        //在时钟界面x轴正方向就是3点钟
        var colorNumber = [3,4,5,6,7,8,9,10,11,12,1,2]
        //配置字体和对齐方向
        ctx.font="25px Arial";
        ctx.textAlign = "center"
        ctx.textBaseline = "middle"
        //循环遍历,开始绘制数字
        for(var i = 0;i

绘制时针

绘制时针、分针以及秒针的理念是先绘制0时刻的样子,然后旋转画布一定的弧度,从而达到转动的效果。

    //绘制时针
    function drawHours(hours,minte) {
        //保存环境
        ctx.save()
        //计算时钟角度和偏离的角度
        var rad = 2 * Math.PI / 12 * hours;
        var rad2 = 2 * Math.PI / 12 /60 * minte;
        //旋转画布
        ctx.rotate(rad+rad2)
        ctx.beginPath();
        //配置绘制效果
        ctx.lineWidth = 6
        ctx.strokeStyle = "#000"
        //线的两端保持圆角
        ctx.lineCap = "round"
        //将绘制点移动到中心原点以下10个像素点
        ctx.moveTo(0,10);
        //绘制一个线
        ctx.lineTo(0,-(canvasWidth-150)/2)
        ctx.stroke()
        //恢复之前保存的环境
        ctx.restore()
    }

绘制分针和秒针

绘制分针和秒针的方法和时针一样,仅仅是绘制的颜色和宽度不一样,这里不再详细赘述.

    //绘制分针
    function drawMinute(minute) {
        ctx.save()
        var rad = 2 * Math.PI / 60 * minute;
        ctx.rotate(rad)
        ctx.beginPath();
        ctx.lineWidth = 3
        ctx.strokeStyle = "#000"
        ctx.lineCap = "round"
        ctx.moveTo(0,10);
        ctx.lineTo(0,-(canvasWidth-100)/2)
        ctx.stroke()
        ctx.restore()
    }
    //绘制秒针
    function drawSecond(second) {
        ctx.save()
        var rad = 2 * Math.PI / 60 * second;
        ctx.rotate(rad)
        ctx.beginPath();
        ctx.lineWidth = 3
        ctx.strokeStyle = "#f00"
        ctx.lineCap = "round"
        ctx.moveTo(0,20);
        ctx.lineTo(0,-(canvasWidth-40)/2)
        ctx.stroke()
        ctx.restore()
    }

绘制中心白点

时针、分针和秒针的中心集合点出有白点,类似某个机械元件,将三个针锁住,我们只要绘制原点即可。

    //绘制原点
    function drawPoint() {
        ctx.beginPath()
        ctx.fillStyle ="#FFF"
        ctx.arc(0,0,3,0,2*Math.PI)
        ctx.fill()
    }

开始时钟

我们将当前时间绘制到始终上面即可,需要注意的是,在绘制之前需要将之前绘制的东西清除掉。

    //开始启动时针
    function startColor() {
        //清除画布内容
        ctx.clearRect(0,0,canvasWidth,canvasHeight)
        var date = new Date()
        var hour = date.getHours()
        var minute = date.getMinutes()
        var second = date.getSeconds()
        drawBackground()
        drawHours(hour,minute)
        drawMinute(minute)
        drawSecond(second)
        drawPoint()
        ctx.restore()
    }

设置定时重新绘制

要想动态的让时钟跑起来,我们需要设置一个定时执行器,每秒更新一次,这样始终就完全动起来了

    setInterval(startColor,1000)

总结

这个时钟的宽度和高度已经写死了,在动态调节的过程中,会出现错位等问题,下一篇将修正这个问题,敬请期待。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1223.html

相关文章

  • 自定义view控件效果实现及实践

    摘要:项目需求讨论自定义实现步骤及封装根据实际项目需求出发。自定义控件之带下载进度的下载按钮最近要用到一个带下载进度的按钮,各种搜索了一波,很抱歉,实在没有发现自己想要的效果,没办法只能自己尝试实现了一个了。 项目需求讨论 - Android 自定义 Dialog 实现步骤及封装 根据实际项目需求出发。因为项目中的对话框要配合整个项目的 UI 风格,所以进行自定义 Dialog 的实现步骤,...

    shiweifu 评论0 收藏0
  • Android-自定义View

    摘要:自定义简单实现凹凸优惠券效果自定义属性的简单使用,继承重写方法使用来绘制,简单实现凹凸优惠券效果图文并茂自定义之切换标签自定义实现一个简单好用的切换标签自定义滑动确认控件自定义控件,用来进行滑动确认等操作。 Android 之自定义 View 的死亡三部曲之 Measure 我还不知道你的三围呢(你要占多少屏幕),我怎么能轻易让你出场呢? Android 自定义 View,ViewGr...

    UnixAgain 评论0 收藏0
  • canvas动画时钟

    摘要:最近在学,然后根据上的例子做了个动画时钟为什么要造个轮子,因为丑。。首先,找一张时钟的图片,就是下面这张了。那么我们就用循环来画出小时的刻度。这个就是我们的绘制时钟的函数。到这里,动画时钟就了效果图如下演示地址地址 最近在学canvas,然后根据MDN上的例子做了个动画时钟(为什么要造个轮子,因为丑。。) 这是MDN上的例子,怎么说呢,比较复古吧。 showImg(https://se...

    GHOST_349178 评论0 收藏0
  • canvas动画时钟

    摘要:最近在学,然后根据上的例子做了个动画时钟为什么要造个轮子,因为丑。。首先,找一张时钟的图片,就是下面这张了。那么我们就用循环来画出小时的刻度。这个就是我们的绘制时钟的函数。到这里,动画时钟就了效果图如下演示地址地址 最近在学canvas,然后根据MDN上的例子做了个动画时钟(为什么要造个轮子,因为丑。。) 这是MDN上的例子,怎么说呢,比较复古吧。 showImg(https://se...

    didikee 评论0 收藏0
  • Canvas入门-利用Canvas绘制好玩电子时钟

    摘要:首先,我们要创建个二维数组放置我们从的点阵图形,当元素的值为的时候,就要将其绘制出来。 在这之前 你需要了解一下方法的使用: beginPath() closePath() moveTo() lineTo() fill() stroke() fillRect() clearRect() 这些我在前面的文章介绍过,可以看: canvas入门-利用 canvas 制作一个七巧板 画个圆...

    Riddler 评论0 收藏0

发表评论

0条评论

trilever

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<