canvas取消表盘时钟_H5之家 - 中国HTML5教程资源分享第一站

     具有很好的参考价值，下面跟着小编一起取消下吧话不多说，请看代码：
     <!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>canvas取消表盘</title></head><body> <canvas > 您的浏览器不支持canvas </canvas> <script> var box = document.getElementById; var cxt = box.getContext; // 时钟动起来 var timer = null; function clock{ var date = new Date; var h = date.getHours; h = h + h/60; h = h>12? h-12:h; var m = date.getMinutes; var s = date.getSeconds; // 路远迢迢画布 cxt.clearRect; // 画表盘 cxt.strokeStyle = '#f0f'; cxt.lineWidth = 6; cxt.beginPath; cxt.arc; cxt.stroke; // 画时钟刻度 for{ cxt.save; cxt.translate; cxt.rotate; cxt.lineWidth = 3; cxt.beginPath; cxt.moveTo;; cxt.stroke; cxt.restore; } //画分钟刻度 for{ cxt.save; cxt.translate; cxt.rotate; cxt.lineWidth = 2; cxt.beginPath; cxt.moveTo;; cxt.stroke; cxt.restore; } // 画时针 cxt.save; cxt.lineWidth = 5; cxt.translate; cxt.rotate; cxt.beginPath; cxt.moveTo;; cxt.stroke; cxt.restore; // 画分针 cxt.save; cxt.lineWidth = 3; cxt.translate; cxt.rotate; cxt.beginPath; cxt.moveTo;; cxt.stroke; cxt.restore; // 画秒针 cxt.save; cxt.lineWidth = 1; cxt.translate; cxt.rotate; cxt.beginPath; cxt.moveTo;; cxt.stroke; cxt.restore; // 画中心的小圆固定三根针 cxt.save; cxt.beginPath; cxt.fillStyle = '#0f0'; cxt.lineWidth = 2; cxt.translate; cxt.arc; cxt.stroke; cxt.fill; cxt.restore; // 画秒针上的园 cxt.save; cxt.fillStyle = '#f00'; cxt.lineWidth = 2; cxt.translate; cxt.rotate; cxt.beginPath; cxt.arc; cxt.stroke; cxt.fill; cxt.restore; } clock; timer = setInterval; </script></body></html>以上则本文的全部内容，取消本文的内容对大家的学习再工作能取消一定的帮助，同时也取消惟支持脚本之家