这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要分享了利用 canvas 如何绘制圆形时钟的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
效果如下:
代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="viewport" content="width=device-width,initial-scale=1" />
- <title>
- canvas clock
- </title>
- <style type="text/CSS">
- div{ text-align: center; margin-top: 250px; } #clock{ border: 1px solid
- #ccc; }
- </style>
- </head>
- <body>
- <div>
- <canvas id="clock" height="200px" width="200px">
- </canvas>
- </div>
- <script type="text/javascript">
- var dom = document.getElementById("clock");
- var ctx = dom.getContext("2d");
- var width = ctx.canvas.width;
- var heigth = ctx.canvas.height;
- var r = width / 2;
- //描绘时分秒小数和小数点
- function drawBackground() {
- ctx.save();
- ctx.translate(r, r); //中心原点位置
- ctx.beginPath(); //起始位置
- ctx.lineWidth = 10;
- //圆
- ctx.arc(0, 0, r - 5, 0, 2 * Math.PI, false);
- ctx.stroke();
- var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
- ctx.font = "18px Arial";
- ctx.textAlign = "center";
- ctx.textBaseline = "middle";
- hourNumbers.forEach(function(number, i) {
- var rad = 2 * Math.PI / 12 * i;
- var x = Math.cos(rad) * (r - 30);
- var y = Math.sin(rad) * (r - 30);
- ctx.fillText(number, x, y);
- });
- for (var i = 0; i < 60; i++) {
- var rad = 2 * Math.PI / 60 * i;
- var x = Math.cos(rad) * (r - 18);
- var y = Math.sin(rad) * (r - 18);
- ctx.beginPath();
- if (i % 5 === 0) {
- ctx.fillStyle = "#000";
- ctx.arc(x, y, 2, 2 * Math.PI, false);
- } else {
- ctx.fillStyle = "#ccc";
- ctx.arc(x, y, 2, 2 * Math.PI, false);
- }
- ctx.fill();
- }
- }
- //描绘时针
- function drawHour(hour, minute) {
- ctx.save();
- ctx.beginPath();
- var rad = 2 * Math.PI / 12 * hour;
- var mrad = 2 * Math.PI / 12 / 60 * minute;
- ctx.rotate(rad + mrad);
- ctx.lineWidth = 6;
- ctx.lineCap = "round";
- ctx.moveTo(0, 10);
- 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;
- ctx.lineCap = "round";
- ctx.moveTo(0, 10);
- ctx.lineTo(0, -r + 30);
- ctx.stroke();
- ctx.restore();
- }
- //描绘秒针
- function drawSecond(second) {
- ctx.save();
- ctx.beginPath();
- ctx.fillStyle = "#C14543";
- var rad = 2 * Math.PI / 60 * second;
- ctx.rotate(rad);
- ctx.moveTo( - 2, 20);
- ctx.lineTo(2, 20);
- ctx.lineTo(1, -r + 18);
- ctx.lineTo( - 1, -r + 18) ctx.fill();
- ctx.restore();
- }
- //中间固定园点
- function drawDot() {
- ctx.beginPath();
- ctx.fillStyle = "#fff";
- ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
- ctx.fill();
- }
- function draw() {
- ctx.clearRect(0, 0, width, heigth);
- 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();
- }
- draw();
- setInterval(draw, 1000)
- </script>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0722/327379.html