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. Windows，Linux换行知识

    换行符在写文件的时候用得上 Linux: "\n"Windows: "\r\n" 注意:换行符一定要加上双引号,单引号是没有用的.

  2. 正确看待HTML5的语法变化

    也许会有人问:“HTML4已经很普及了,如果改变基础语法,会不会有什么影响?” 我们都知道,在HMTL5之前几乎没有符合标准规范的Webu浏览器!在这种情况下,各个浏览器之间的互相兼容性和互操作性在很 ...

  3. 关于androidAsyncHttp支持https

    一.AsyncHttpClient asycnHttpClient = new AsyncHttpClient(true, 80, 443); 二.或者参照源码,添加证书验证 You need imp ...

  4. 【Python学习】由于windows环境问题导致的不能安装某些需要VC编译的插件

    由于windows环境问题导致的不能安装某些需要VC编译的插件 下载地址:http://www.lfd.uci.edu/~gohlke/pythonlibs/ 安装方法: 在CMD中输入 pip in ...

  5. 学习第一个头文件stdio.h

    使用标准输入输出库函数时要用到 “stdio.h”文件,因此源文件开头应有以下预编译命令: #include<stdio.h> stdio是standard input&outup ...

  6. Super Jumping! Jumping! Jumping!（hdu 1087 LIS变形）

    Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  7. 超级密码（dfs）

    超级密码233 Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  8. HDU 1172 猜数字（DFS）

    猜数字 Time Limit:10000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status ...

  9. 数据的加密传输——单片机上实现TEA加密解密算法

    各位大侠在做数据传输时,有没有考虑过把数据加密起来进行传输,若在串口或者无线中把所要传的数据加密起来,岂不是增加了通信的安全性.常用的加密解密算法比如DES.RSA等,受限于单片机的内存和运算速度,实 ...

  10. 对发给Application.Handle消息的三次执行(拦截)消息的过程

    unit Main; interface uses SysUtils, WinTypes, WinProcs, Messages, Classes, Graphics, Controls, Forms ...