HTML5最受欢迎的功能就是<canvas>元素。这个元素负责在页面中设定一个区域，然后就可以通过JavaScript动态地在这个区域中绘制图形。关于<canvas>元素的一些基本用法可以参考w3school。

　　花了一下午时间熟悉了下常用的API，也参考了下网上的一些demo，实现了一个简单的时钟显示，代码记录如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>canvas-clock</title>

     <style type="text/css">

         /* canvas drawing */

         .clock {

             width: 300px;

             margin: 0 auto;

         }

         #clock {

             width: 300px;

             height: 300px;

         }

     </style>

     <script type="text/javascript">

         var clockDraw = function(context) {

             var now = new Date();

             context.save();

             context.clearRect(0, 0, 300, 300);

             context.scale(1, 0.5);

             context.translate(150, 150);

             // init hours

             context.save();

             for (var i = 0; i < 12; i++ ) {

                 context.beginPath();

                 context.rotate(Math.PI / 6);

                 context.moveTo(0, -123);

                 context.lineWidth = 5;

                 context.lineTo(0, -110);

                 context.stroke();

             }

             context.restore();

             // init minutes

             context.save();

             context.lineWidth = 5;

             for (i = 0; i < 60; i++) {

                 if (i % 5 != 0) {

                     context.beginPath();

                     context.moveTo(0, 118);

                     context.lineWidth = 2;

                     context.lineTo(0, 115);

                     context.stroke();

                 }

                 context.rotate(Math.PI / 30);

             }

             context.restore();

             var sec = now.getSeconds();

             var min = now.getMinutes();

             var hr  = now.getHours();

             hr = hr >= 12 ? hr - 12 : hr;

             context.fillStyle = "black";

             // draw hour

             context.save();

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

             context.lineWidth = 7;

             context.beginPath();

             context.moveTo(0, 10);

             context.lineTo(0, -80);

             context.stroke();

             context.restore();

             // draw minute

             context.save();

             context.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);

             context.lineWidth = 5;

             context.beginPath();

             context.moveTo(0, 20);

             context.lineTo(0, -100);

             context.stroke();

             context.restore();

             // draw second

             context.save();

             context.rotate(sec * Math.PI / 30);

             context.strokeStyle = "#D40000";

             context.fillStyle = "#D40000";

             context.lineWidth = 4;

             context.beginPath();

             context.moveTo(0, 30);

             context.lineTo(0, -113);

             context.stroke();

             context.beginPath();

             context.arc(0, 0, 5, 0, Math.PI * 2, false);

             context.fill();

             context.restore();

             context.beginPath();

             context.arc(0, 0, 125, 0, Math.PI * 2, false);

             context.lineWidth = 5;

             context.strokeStyle = '#325FA2';

             context.stroke();

             context.restore();

         };

         var initClock = function() {

             var clock = document.getElementById("clock");

             if (clock.getContext) {

                 var context = clock.getContext("2d");

                 clockDraw(context);

                 setInterval((function() {

                     return function() {

                         clockDraw(context);

                     }

                 })(context), 1000);

             };

         };

         window.onload = function() {

             //canvas drawing

             initClock();

         };

     </script>

 </head>

 <body>

     <div class="clock">

         <canvas id="clock">A drawing of clock.</canvas>

     </div>

 </body>

 </html>

Canvas基础学习（一）——实现简单时钟显示的更多相关文章

  1. Java基础学习-- 继承 的简单总结

    代码参考:Java基础学习小记--多态 为什么要引入继承? 还是做一个媒体库,里面可以放CD,可以放DVD.如果把CD和DVD做成两个没有联系的类的话,那么在管理这个媒体库的时候,要单独做一个添加CD ...

  2. canvas基础学习

    /** * Created by ty on 2016/7/11. * canvas 基础 */ window.onload = function() { var canvas = document. ...

  3. HTML5 <canvas> 基础学习

    HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形 创建一个画布( ...

  4. canvas一周一练 -- canvas基础学习

    从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳＿┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...

  5. canvas基础学习（二）

    一.图像绘制 canvas绘制图像的方法是ctx.drawImage();该方法有三种使用方式 1.ctx.drawImage(img,x,y); img是指图像对象,x和y分别是这个图像左上角在ca ...

  6. 【jQuery基础学习】10 简单了解jQuery Mobile及jQuery各个级别版本的变化

    关于 jQuery Mobile jQuery Mobile是为了填补jQuery在移动设备应用上的一个新项目.它应用了HTML5和CSS3. 主要特性 基于jQuery构建. 采用与jQuery一致 ...

  7. salesforce lightning零基础学习(一) lightning简单介绍以及org开启lightning

    lightning对于开发salesforce人员来说并不陌生,即使没有做过lightning开发,这个名字肯定也是耳熟能详.原来的博客基本都是基于classic基于配置以及开发,后期博客会以ligh ...

  8. canvas基础学习笔记

    canvas基本用法 1.什么是canvas(画布)  <canvas> 是 HTML5 新增的元素,可用于通过使用JavaScript中的脚本来绘制图形,例如,它可以用于绘制图形,创建动 ...

  9. canvas基础学习（四）

    今天逛天猫时,看见优衣库店铺首页有个这个飘雪效果,顿时觉得好酷炫,立马从里面copy代码进行学习. 之前我也做过一些canvas特效,往往在canvas全屏时,canvas下层的div就无法进行dom ...

随机推荐

  1. mysql存储过程实践总结

    一:参数类型 1.IN 只能读取参数并在函数内部更改有效,不能持久化到外部变量 2.OUT  不能读取参数,可以在函数内部修改并保存到外部变量 3.INOUT 既能读取又能持久化 二:基本格式 mys ...

  2. 【转】cocos2d-x windows开发环境配置

    声明:本教程在参考了以下博文,并经过自己的摸索后实际操作得出,本教程系本人原创,由于升级后的cocos2d-x有了一些变化,目前的博文还没有关于Cocos2d-x 2.2.1最新版搭建Android交 ...

  3. iscsi模型相关点

    1.iscsi即ip scsi,按架构分为控制器架构.链接桥系统架构.pc系统架构.这里主要说明一下pc系统架构. 所谓的pc系统架构,就是利用target软件存储端+initiator客户端+tcp ...

  4. python:利用urllib查找计算机二级准考证号

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaYAAAEACAIAAAB3VkWnAAAgAElEQVR4nOydZ3gUR9bv+WhExhHnDH

  5. 关于C语言中的强符号、弱符号、强引用和弱引用的一些陋见，欢迎指正

    首先我表示很悲剧,在看<程序员的自我修养--链接.装载与库>之前我竟不知道C有强符号.弱符号.强引用和弱引用.在看到3.5.5节弱符号和强符号时,我感觉有些困惑,所以写下此篇,希望能和同样 ...

  6. linux----ulimit 限制

    ulimit -a 显示当前用户的各种限制. ulimit -n 的数值表示每个进程可以打开的文件数目. 一般情况下, ulimit -n 的数值是1024. 当进程打开的文件数目超过此限制时,该进程 ...

  7. Typecho 代码阅读笔记（一） - 页面渲染及路由机制

    转载请注明出处:http://blog.csdn.net/jh_zzz 从 index.php 开始看, /** 初始化组件 */ Typecho_Widget:: widget('Widget_In ...

  8. 通过Alexa API获取Alexa排名

    我们通会用Alexa的网站(或其它站长工具网站)来栓查我们的网​站流量排名,这样就必须去那些网站.实际上,可以通过Alexa XML API 获取网站的Alexa相关的数据(XML格式的),再使用XM ...

  9. Redis Clients Handling

    This document provides information about how Redis handles clients from the point of view of the net ...

  10. UESTC_树上的距离 2015 UESTC Training for Graph Theory<Problem E>

    E - 树上的距离 Time Limit: 2000/1000MS (Java/Others)     Memory Limit: 262143/262143KB (Java/Others) Subm ...