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. Oracle:ORA-01791: 不是 SELECTed 表达式

     项目中写hql语句 出现 ORA-01791: 不是 SELECTed 表达式问题. 语句如下: select distinct(name) where student order by numbe ...

  2. PHP遍历文件夹下的文件和获取到input name的值

    <?php$dir = dirname(__FILE__); //要遍历的目录名字 ->当前文件所在的文件夹//$dir='D:\PHP\wamp\www\admin\hosts\admi ...

  3. php的一些小笔记--数学函数

    通常我们使用的数学函数不多,经常出现的有 floor 地板->舍去 ceil   天花板->进一 round 四舍五入 rand 随机数 mt_rand 产生更好的随机数 pow 指数表达 ...

  4. 如何使用Assetic进行文件管理

    安装和配置Assetic 从symfony2.8开始,Assetic就不再被包括在symfony标准版.使用任何Assetic的特性之前需要安装AsseticBundel,在命令行执行下面命令: $ ...

  5. Equations（hdu 1496 二分查找+各种剪枝）

    Equations Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  6. Effective Java2读书笔记-创建和销毁对象（四）

    第7条:避免使用终结方法 这一条讲的简直是不知所云.先简单记下来其中说出的几条: ①显式终止方法的典型例子有InputStream.OutputStream和java.sql.Connection上的 ...

  7. [转载] 50个Android开发人员必备UI效果源码

    好东西,多学习! Android 仿微信之主页面实现篇Android 仿微信之界面导航篇Android 高仿QQ 好友分组列表Android 高仿QQ 界面滑动效果Android 高仿QQ 登陆界面A ...

  8. Qt学习(四)—实例涂鸦画板mspaint

    一.Qt图形绘制 自己在Qt开源社区在自学yafeilinux前辈的<Qt快速入门系列教程>中的图形篇,结合所学的知识,可以做一个涂鸦板实例 二.实现涂鸦板 1.新建工程mspaint, ...

  9. Yii2 框架下bootstrap 弹窗预览视频等~

    Yii2 本身已经引用了'yii\bootstrap\BootstrapAsset',所以使用bootstrap 非常简洁. 1 在PHP页面引用命名空间 use app\assets\AppAsse ...

  10. laravel5.3 笔记一

    laravel5.3 笔记 安装环境 laravel环境,laravel中文学习论坛上面有相关的教程 创建应用 laravel new blog 其中blog就是你的应用的名字 数据迁移 php ar ...