这是一个Javascrip写的时钟，没有任何图片。

由于ff等dom2浏览器使用svg绘图，而ie使用vml，两者差距非常大，所以xml绘图一直无法统一起来。

最近想要尝试一下，想要实现svg和vml的封装和统一调用，但是搜索到Google的才子们发布的这个在IE下实现canvas绘图的框架。虽然并不是所有的svg的功能都实现了，但是绝对，聊胜于无。

这个时钟，即是基于该框架。由于该框架采用的函数名称与svg绘图的方法都是一致的，所以在ff等dom2浏览器中均可以运行，而且貌似效率要高一点。

这个时钟还不是最终的版本，所以有些参数请到函数内部修改。

Clock.js的几点说明

function Clock(id, size) ：
id是一个html容器的id，请在里面放四个canvas标签。实在没办法，ie不识别这个标签，无法动态创建。
size是表盘的直径。

void __drawBack__()：
绘制表盘的刻度和背景。直接找个图片作容器背景来做表盘更简单。

Array __getSecondAngel__()：
获取当前时间，将秒、分、时转换为角度，并返回一个数组。

void __handTool__()：
在制定的canvas中绘制表针。可以通过修改这个函数，来改变指针的类型。

int secondStep：
每秒的分步。如果为1，则一秒跳一针，如果到30上下，则会很平滑地转动。数值越大运算频率越高。预置为6，模拟机械手表的转动感觉。

以下是所需的资源

ExplorerCanvas站点

mk.js v 2.9

Clock.js

本演示的代码。请注意，excanvas.compiled.js代码通过css方式调用，在IE下必须放在canvas标签之前。

<style>
#info{ border:1px solid #555; background-color:#f1f1f1; font-size:14px; width:800px; padding:1em; line-height:1.4em; text-indent:2em; }
#container{ position:absolute; top:320px; left:600px; }
</style>
<!--[if IE]><script type="text/javascript" src="http://files.cnblogs.com/muse/excanvas.compiled.js"></script><![endif]-->
<script type="text/javascript" src="http://files.cnblogs.com/muse/mk.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/muse/Clock.js"></script>
<script type="text/javascript">
mk.addEvent(window, "load", function(){ new Clock("container", 200).init(); });
</script>
<div id="container">
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
</div>

转载于:https://www.cnblogs.com/muse/articles/1446121.html

[Javascript]基于ExplorerCanvas绘制表盘时钟相关推荐

  1. html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例

    本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...

  2. html5canvas绘制时钟,JavaScript html5 canvas绘制时钟效果

    本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: canvas绘图 JavaScript部分: function init() ...

  3. android canvas 画按钮,Android 用Canvas轻松绘制一个时钟

    接下来这篇文章主要是结束如何轻松自定义一个View并使用Canvas绘制一个时钟的案例,话不多说先上图瞅瞅,一共实现了两种效果,一种是秒动(秒针一秒走一针).另一种是连动式的,秒针不会停会一直走动,话 ...

  4. Canvas绘制一个时钟

    Canvas绘制一个时钟 Canvas:一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处 ...

  5. Html5的Canva绘制动态时钟显示当前时间！！！（附源码）

    前言 canvas设计一个显示当前时间的时钟 实现情况 思路 想让canvas绘制的东西动起来,最直接的办法就是不停的进行重绘,可能刚开始有些人会担心效率的问题,害怕代码过长冗余,可读性差的问题,实际 ...

  6. 利用javascript和WebGL绘制地球 【翻译】

    利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...

  7. 用matlab绘制一个时钟

    话不多说,直接上干货 hfig=figure('visible','off'); set(hfig,'NumberTitle','off'); set(hfig,'name','My Clock'); ...

  8. 使用canvas绘制动画时钟

    一代码 <!DOCTYPE html > <head> <meta charset="UTF-8" ><title>绘制动态时钟&l ...

  9. 基于51单片机的时钟系统

     这一次带来的项目是课程设计级别的基于51单片机的时钟系统,本次的项目共有两种,一种是基础功能时钟,上电后自动从00-00-00开始计时,另一种加上了调时功能,上电后自动从00-00-00开始,当需要 ...

最新文章

  1. Linux内核ipsec密码库,关于2.6.18 ipsec内核支持(NETKEY)的问题
  2. 如何用计算机输入数学公式,使用Win7输入面板让数学公式输入更轻松
  3. 转载：Windows核心编程---空指针赋值分区
  4. #UnityTips# 2017.11.14
  5. 照顾好自己才能照顾好别人_您必须照顾的5个基本数据
  6. [转载] java左移右移和无符号右移
  7. 文件类常用方法 c# 1614531951
  8. 路径还原(求两个点之间最短距离的路径）
  9. Anaconda3安装以及常用命令
  10. memcached在项目中的应用
  11. 影院售票系统-----一个让你有成就感的小项目，只有一丢丢哦
  12. excel怎么设置自动计算_机械设计工程师辅助计算Excel表格，自动进行选型计算...
  13. Android Unrecognized Android Studio (or Android Support plugin for IntelliJ IDEA) version ‘202.7660.
  14. PLA-PEG2000-Maleimide，聚乳酸和马来西安亚楠修饰的PEG，MAL-PEG2000-PLA
  15. 解析双稳态肖特基二极管的设计
  16. mysql优化-Explain工具介绍
  17. javascript 实现中文按照拼音首字母排序
  18. 如何制作wordpress短代码
  19. linux音频文件格式转换,在Ubuntu @ Linux 中音频和音乐文件的格式转换
  20. （三）棋盘覆盖问题（思路）

热门文章

  1. 2015-UNet论文翻译
  2. 一年级abb式词语并造句_ABB式词语如何活学活用，家长都收藏了！
  3. php fpm高并发,php-fpm 高并发、502解决方案
  4. 【软件工程导论】可行性研究
  5. Kafka HWLEO概念入门
  6. 大数据各组件默认端口
  7. 什么是损失函数与平均误差算法分析
  8. sqlite3:unique constraint failed xxx Frame.No
  9. 数据结构HashMap（Android SparseArray 和ArrayMap） 1
  10. Linux 学习笔记 二