利用canvas画钟表

canvas （HTML5新增标签）

**什么是canvas？

Canvas
API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。
Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

首先贴出最终结果，个人认为难度不大，但是通过做这个demo，可以锻炼我们阅读文档，分析问题的能力。接下里会写出思考过程，希望对大家能有帮助，通识也是我自己加深印象的过程。

第一步-表盘所需要的几何知识

三个指针旋转的角度是如何计算的。
表盘是如何生成的。
十二个小时数字是如何生成的。

第二步-Canvas外边框圆形

定义画圆方法，执行方法：
1）重新映射画布上的 (0,0) 位置，ctx.translate(r,r);
2）起始一条路径，ctx.beginPath();
3）开始画圆：ctx.arc(0,0,r,0,2*Math.PI,false);参数：圆点坐标x、y，起始弧度sAngle、eAngle，是否逆时针
4）绘制已定义的路径：ctx.stroke();默认1px；

    var dom = document.getElementById("clock");
    var ctx = dom.getContext("2d");
    var width = ctx.canvas.width;
    var height = ctx.canvas.height;
    var r = width / 2;
    var BL = width / 200;

    function drawBackGrounf() {
        ctx.save();//保存一下最开始时钟的环境
        ctx.translate(r, r);//矩形的中心点
        ctx.beginPath();
        ctx.lineWidth = 10 * BL;//线要 乘上 比例
        ctx.arc(0, 0, r - ctx.lineWidth / 2, 2 * Math.PI, false);//乘上比例
        ctx.stroke();
        // ctx.fillStyle="#00000a";

第三步-绘制表盘里的内容

这里需要写三个函数，我们需要写小时、分钟、秒的指针的函数完整代码我回粘贴在