- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- canvas时钟
- </title>
- <style>
- div { text-align: center; margin-top: 15%; }
- </style>
- </head>
- <body>
- <div>
- <canvas id="clock" height="200px" width="200px">
- </canvas>
- </div>
- <script>
- 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 rem = width / 200;
- // 画圆
- function drawBackground() {
- ctx.save(); //save() 保存当前环境的状态
- ctx.translate(r, r); //translate() 重新映射画布上的 (0,0) 位置
- ctx.beginPath(); //beginPath() 起始一条路径,或重置当前路径
- ctx.lineWidth = 10 * rem; //lineWidth 设置或返回当前的线条宽度
- ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false) //arc() 创建弧/曲线(用于创建圆形或部分圆)
- ctx.stroke(); //stroke() 绘制已定义的路径
- //12个点
- var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
- ctx.font = 18 * rem + "px arial";
- ctx.textAlign = "center"; //textAlign 设置或返回文本内容的当前对齐方式
- ctx.textBaseline = "middle"; //textBaseline 设置或返回在绘制文本时使用的当前文本基线
- hourNumbers.forEach(function(number, i) {
- var rad = 2 * Math.PI / 12 * i;
- var x = Math.cos(rad) * (r - 30 * rem);
- var y = Math.sin(rad) * (r - 30 * rem);
- ctx.fillText(number, x, y); //fillText() 在画布上绘制"被填充的"文本
- });
- //60个点
- for (var i = 0; i < 60; i++) {
- var rad = 2 * Math.PI / 60 * i;
- var x = Math.cos(rad) * (r - 18 * rem);
- var y = Math.sin(rad) * (r - 18 * rem);
- ctx.beginPath();
- if (i % 5 === 0) {
- ctx.fillStyle = "red";
- ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false);
- } else {
- ctx.fillStyle = "#eee";
- ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false);
- }
- ctx.fill();
- }
- }
- // 时针
- function drawHour(hour, minute) {
- ctx.save();
- ctx.beginPath(); //beginPath() 起始一条路径,或重置当前路径
- var rad = 2 * Math.PI / 12 * hour;
- var mrad = 2 * Math.PI / 12 / 60 * minute;
- ctx.rotate(rad + mrad);
- ctx.lineWidth = 6 * rem;
- ctx.lineCap = 'round';
- ctx.moveTo(0, 10 * rem);
- ctx.lineTo(0, -r / 2);
- ctx.stroke();
- ctx.restore();
- }
- //分针
- function drawMinute(minute) {
- ctx.save();
- ctx.beginPath();
- var rad = 2 * Math.PI / 60 * minute;
- ctx.rotate(rad);
- ctx.lineWidth = 3 * rem;
- ctx.lineCap = 'round';
- ctx.moveTo(0, 10 * rem);
- ctx.lineTo(0, -r + 30 * rem);
- ctx.stroke();
- ctx.restore();
- }
- //秒针
- function drawSecond(second) {
- ctx.save();
- ctx.beginPath();
- ctx.fillStyle = "red";
- var rad = 2 * Math.PI / 60 * second;
- ctx.rotate(rad);
- ctx.moveTo( - 2 * rem, 20 * rem); //moveTo() 把路径移动到画布中的指定点,不创建线条
- ctx.lineTo(2 * rem, 20 * rem); //lineTo() 添加一个新点,然后在画布中创建从该点到最后指定点的线条
- ctx.lineTo(1, -r + 18 * rem);
- ctx.lineTo( - 1, -r + 18 * rem);
- ctx.fill(); //fill() 填充当前绘图(路径)
- ctx.restore();
- }
- // 圆点
- function drawDot() {
- ctx.beginPath();
- ctx.fillStyle = "write";
- ctx.arc(0, 0, 3 * rem, 0, 2 * Math.PI, false);
- ctx.fill();
- }
- function draw() {
- ctx.clearRect(0, 0, width, height); //clearRect() 在给定的矩形内清除指定的像素
- var now = new Date();
- var hour = now.getHours();
- var minute = now.getMinutes();
- var second = now.getSeconds();
- drawBackground();
- drawHour(hour, minute);
- drawMinute(minute);
- drawSecond(second);
- drawDot();
- ctx.restore(); //restore() 返回之前保存过的路径状态和属性
- }
- draw();
- setInterval(draw, 1000);
- </script>
- </body>
- </html>
用到的 canvas,api: save() 保存当前环境的状态 restore() 返回之前保存过的路径状态和属性 translate() 重新映射画布上的 (0,0) 位置 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式 lineCap 设置或返回线条的结束端点样式 lineWidth 设置或返回当前的线条宽度 fill() 填充当前绘图(路径) stroke() 绘制已定义的路径 beginPath() 起始一条路径,或重置当前路径 moveTo() 把路径移动到画布中的指定点,不创建线条 lineTo() 添加一个新点,然后在画布中创建从该点到最后指定点的线条 arc() 创建弧 / 曲线(用于创建圆形或部分圆) rotate() 旋转当前绘图 font 设置或返回文本内容的当前字体属性 textAlign 设置或返回文本内容的当前对齐方式 textBaseline 设置或返回在绘制文本时使用的当前文本基线 fillText() 在画布上绘制 "被填充的" 文本 更多内容请关注我的 GitHub:
GitHubcanvas:
http://www.haoline.cn/canvas-time/来源: http://www.qdfuns.com/notes/13740/f393b9dcf8ab5958dc34d3ecd9a16319.html