使用canvas绘制时钟

使用canvas绘制时钟

首先创建画布

<canvas id="clock" width="500" height="500" style="background: transparent;"></canvas>

然后设计画布样式

        var canvas=document.getElementById("clock");
        var cxt=canvas.getContext("2d");
        function drawClock(){
            //获取系统时间
            var date=new Date;
            var hour=date.getHours();
            var min=date.getMinutes();
            var sec=date.getSeconds();

            //清空画布
            cxt.clearRect(0,0,canvas.width,canvas.height);
            var img=new Image();
            img.src="nanchen.png";
            cxt.drawImage(img,40,40,420,420);
            //起始一条路径
            cxt.strokeStyle="#0fffff";
            cxt.lineWidth="10";
            cxt.beginPath();
            cxt.arc(250,250,200,0,Math.PI*2,false);
            cxt.stroke();
            //结束路径
            cxt.closePath();
            cxt.clip();


            //绘制时刻度
            for(var i=0;i<12;i++){
                cxt.save();
            cxt.strokeStyle="yellow";
            cxt.lineWidth="7";
            //设置原点
            cxt.translate(250,250);
            //设置旋转角度
            cxt.rotate(30*i*Math.PI/180);//隔三十度画一个时刻度
            cxt.beginPath();
            cxt.moveTo(0,-195);
            cxt.lineTo(0,-175);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
            }



            //绘制分刻度  360/60=6
            for(var i=0;i<60;i++){
                cxt.save();
            cxt.strokeStyle="yellow";
            cxt.lineWidth="5";
            //设置原点
            cxt.translate(250,250);
            cxt.rotate(6*i*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-195);
            cxt.lineTo(0,-185);
            cxt.stroke();
            cxt.closePath();
            //设置旋转角度

            cxt.restore();
            }
            //绘制时针
            cxt.save();
            cxt.strokeStyle="#00ffff";
            cxt.lineWidth="7";
            //设置原点
            cxt.translate(250,250);
            cxt.rotate(hour*30*Math.PI/180);//每小时旋转三十度
            cxt.beginPath();
            cxt.moveTo(0,-130);
            cxt.lineTo(0,10);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();


            //绘制分针
            cxt.save();
            cxt.strokeStyle="#ffff00";
            cxt.lineWidth="5";
            //设置原点
            cxt.translate(250,250);
            cxt.rotate(min*6*Math.PI/180);//每分钟旋转6°
            cxt.beginPath();
            cxt.moveTo(0,-150);
            cxt.lineTo(0,10);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();


            //绘制秒针
            cxt.save();
            cxt.strokeStyle="#f00";
            cxt.lineWidth="3";
            //设置原点
            cxt.translate(250,250);
            cxt.rotate(sec*6*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-170);
            cxt.lineTo(0,10);
            cxt.stroke();
            cxt.closePath();
           // cxt.restore();


            //美化表盘  中间小圆
            cxt.beginPath();
            cxt.arc(0,0,7,0,Math.PI*2);
            cxt.fillStyle="#ffff00";
            cxt.fill();
            cxt.strokeStyle="#ff0000";
            cxt.stroke();
            cxt.closePath();


            //秒针上的小圆
            cxt.beginPath();
            cxt.arc(0,-140,7,0,Math.PI*2);
            cxt.fillStyle="#ffff00";
            cxt.fill();
            cxt.strokeStyle="#ff0000";
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
        }
        drawClock();
        setInterval(drawClock,1000);

效果：

getContext()

getContext() 方法返回一个用于在画布上绘图的环境。

---

clearRect

clearRect清空画布

---

drawImage

HTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有三种函数原型：

• drawImage(image, dx, dy)
• drawImage(image, dx, dy, dw, dh)
• drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

---

第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。

dx和dy是image在canvas中定位的坐标值

dw和dh是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值

sx和sy是image所要绘制的起始位置

sw和sh是image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值

---

beginPath()

beginPath() 其实就是告诉画布：“我要开始画草稿了，请把之前的草稿都清除掉。”是的，beginPath()是重新开始新路径，而把之前的路径都清空掉。如果路径没有了，那么我们的stroke()和fill()就无法起作用

---

arc

arc arc方法是2D画布的一个绘制圆状态的一个方法，arc有六个参数：arc(x, y, r, sAngle, eAngle, counterclockwise);六个参数对应的意思：

x,y表示圆心坐标

r 表示圆的半径

sAngle : 表示开始绘制的角度

eAngle : 表示结束绘制的角度

counterclockwise ： 表示顺时针绘制还是逆时针，false = 顺时针，true = 逆时针，默认值是false

---

stroke()

stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

---

closePath（）

结束路径

---

clip剪切

clip()使用
Canvas中的clip()方法是裁切区可用于限制图像描绘的区域，具体的用法：

使用Canvas的绘制函数比如，rect()、arc()之类的方法选择好绘图区域
使用clip()函数将该区域（由rect()、arc()方法指定的绘图区域）设定为裁选区

---

save和restore

save():保存当前的绘图状态。
restore():恢复之前保存的绘图状态。

---

moveTo

moveTo() 方法把路径移动到画布中的指定点，不创建线条。

ineTo

ineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。