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. Starship Troopers（HDU 1011 树形DP）

    题意: 给定n个定点和m个士兵,n个定点最终构成一棵树,每个定点有一定x个bugs和y个value,每20个bug需要消耗一个士兵,不足20也消耗一个,然后最终收获y个value,只有父节点被占领后子 ...

  2. MVC新语法匿名方法

    一.简单匿名方法 1.0匿名方法的写法规则: delegate(编写匿名方法的参数,格式和类型由程序员自己根据业务逻辑来定义){函数的方法体代码} 最下面使用deledate编写匿名方法参数所写    ...

  3. Django uplodify 多文件同时上传

    Js代码: //批量上传按钮 $('#fileupload').uploadify ({ 'swf' : '/CoveragePlaform/media/uploadify-3.2/uploadify ...

  4. TENX_ASM.uew

    /L14"TENX ASM" Nocase Line Comment = ; File Extensions = INC ASM LST H /Colors = ,,,,, /Co ...

  5. VCL线程的同步方法 Synchronize（用消息来同步）

    看本文时,可以同时参考:Delphi中线程类 TThread实现多线程编程(事件.临界区.Synchronize.WaitFor……) 先说一下RTL和VCL RTL(Run-Time library ...

  6. Mybatis的连接池

    先总结一个原则:mytatis的连接池最大值poolMaximumActiveConnections尽量跟服务器的并发访问量持平以至于大于并发访问量. 原因:在org.apache.ibatis.da ...

  7. easy_install django==1.4.2_百度搜索

    easy_install django==1.4.2_百度搜索 安装指定版本的django

  8. 9.5 在 C# 中使用 F# 库

    9.5 在 C# 中使用 F# 库 像 C# 一样,F# 也是一种静态类型的语言,就是说,编译器知道每一个值的类型,以及类方法和属性的签名.对于与 C# 的互操作性来说.这是很重要的,由于,编译器能够 ...

  9. Android服务之AIDL

    在android开发过程中,为了让其他的应用程序,也可以访问本应用程序的服务,android系统采用远程过程调用来实现.android通过接口来公开定义的服务.我们将能够夸进程访问的服务成为AIDL服 ...

  10. Single Number(JAVA)

    Given an array of integers, every element appears twice except for one. Find that single one. Note: ...