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中文存储问题

    在mysql安装目录下先找到my.ini,给[mysql]和[mysqld]下的default-character-set赋值为utf8 即改为:default-character-set=utf8 ...

  2. PHP设置http头信息

    <?PHP function https($num) { $http = array ( 100 => "HTTP/1.1 100 Continue", 101 =&g ...

  3. zabbix之1监控概念

    1.通过通用的snmp监控,无需代理端 2.通过snmp代理 snmp代理的工作原理:在被监控端设置代理,代理不断的获取本地数据,而管理端定期通过代理获取监控数据. snmp目前有v1,v2,v3三种 ...

  4. 利用cookies获取登录后的网页

    众所周知,HTTP连接是无状态的,那么问题来了,怎么记录用户的登录信息呢?通常的做法是用户第一次发送HTTP请求时,在HTTP Server端生成一个SessionID,SessionID会对应每个会 ...

  5. 15个顶级Java多线程面试题及回答

    Java 线程面试问题 在任何Java面试当中多线程和并发方面的问题都是必不可少的一部分.如果你想获得任何股票投资银行的前台资讯职位,那么你应该准备很多关于多线程 的问题.在投资银行业务中多线程和并发 ...

  6. c#POST请求和接收post请求

    c# post请求发送数据 /// <summary> /// POST请求 /// </summary> /// <param name="url" ...

  7. C# 客户端发送http请求代码 (c/s)

    public class RestClient { private string BaseUri; public RestClient(string baseUri) { this.BaseUri = ...

  8. Unattended Setup Software Components (无人值守安装软件组件)

    原文 http://social.technet.microsoft.com/Forums/windows/en-US/d4ad85b4-8342-4401-83ed-45cefa814ec5/una ...

  9. 软件测试-nextDate问题

    NextDate 函数包含三个变量:month . day 和 year ,函数的输出为输入日期后一天的日期. 例如,输入为 2006年3月 7日,则函数的输出为 2006年3月8日 .要求输入变量  ...

  10. python模块学习之random

    模块源码: Source code: Lib/random.py 文档:http://docs.python.org/2/library/random.html 常用方法: random.random ...