canvas实现实时钟表代码实例（面向对象编程）

最新推荐文章于 2022-06-15 17:48:57 发布

大叶豌豆

最新推荐文章于 2022-06-15 17:48:57 发布

阅读量622

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript HTML5 文章标签： JavaScript canvas 钟表面向对象编程对象

本文链接：https://blog.youkuaiyun.com/dayewandou/article/details/78311739

本文通过JavaScript的canvas技术，结合面向对象编程思想，详细讲解如何实现一个实时钟表的代码实例。首先介绍了面向对象编程的基本思路，包括构造函数、原型和实例化对象的重要性。接着阐述了在圆上找点坐标的数学原理，为绘制钟表指针提供了理论依据。最终展示了实际的钟表显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天我们用canvas画布实现一个钟表的效果，效果简单，望大神勿喷！
面向对象编程是js编程的核心，这个例子是想让我们理解一下面向编程的基本思路。

1.面向对象编程思想的思路：
1.在开始的时候，定义一个构造函数，并且在构造函数中，调用init方法，调用他是为了实现所有的功能
注：如果构造函数有实参传入，那么就要先把传入的实参一一绑定给构造函数
2.定义原型，首先新定义的原型是没有constructor属性的，所以要先给原型绑定该属性，之后就可以开始定义各个功能函数了，
注：一定不要忘了init。
3.实例化对象（new一个对象），为什么要实例化对象呢，因为，我们先前定义的构造函数和原型都是为了给对象实现继承的，
如果不实例化对象就根本没法实现构造函数和原型中定义的功能，所以实例化对象才是重中之重
注：在实例化对象的时候要搞清楚，构造函数是否要传入实参

2.如何在圆上找点的坐标
1.首先，要找的点到圆心的距离
2.其次，要知道圆心点的坐标
3.最后，还要知道要找的点在圆上的相对弧度

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>钟表</title>
    <style>
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas width="800" height="600"></canvas>
    <script>
        var canvas=document.querySelector('canvas');
        var ctx=canvas.getContext('2d');
        function Clock(opt){
    
    
            for(var key in opt){
                this[key]=opt[key];
            }
            ctx.font='16px 微软雅黑';
            ctx.textAlign='center';
            ctx.textbaseline='middle';
            this.init();