这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 canvas 仿 iwatch 时钟效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
效果图:
图(1)
图(2)
代码如下:
- <!doctype html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- *{margin:0; padding:0;} body{ background:#000; text-align:center;} canvas{
- background:#fff;}
- </style>
- <script>
- function toDou(iNum) {
- return iNum < 10 ? '0' + iNum: '' + iNum;
- }
- function d2a(n) {
- return n * Math.PI / 180;
- }
- window.onload = function() {
- var oC = document.getElementById('c1');
- var gd = oC.getContext('2d');
- var cx = oC.width / 2,
- cy = oC.height / 2;
- function clock() {
- gd.clearRect(0, 0, oC.width, oC.height);
- var oDate = new Date();
- var H = oDate.getHours() % 12;
- var M = oDate.getMinutes();
- var S = oDate.getSeconds();
- var MS = oDate.getMilliseconds();
- drawArc(60, 0, (H * 30 + M / 60 * 30), 'orange');
- drawArc(80, 0, (M * 6 + S / 60 * 6), 'purple');
- drawArc(100, 0, (S * 6 + MS / 1000 * 6), 'aqua');
- var str = toDou(H) + ':' + toDou(M) + ':' + toDou(S);
- gd.font = '20px 微软雅黑';
- gd.textAlign = 'center';
- gd.textBaseline = 'middle';
- gd.fillText(str, cx, cy);
- }
- clock() setInterval(clock, 1);
- function drawArc(r, s, e, color) {
- color = color || 'black';
- gd.beginPath();
- gd.arc(cx, cy, r, d2a(s - 90), d2a(e - 90), false);
- gd.strokeStyle = color;
- gd.lineWidth = 20;
- gd.stroke();
- }
- };
- </script>
- </head>
- <body>
- <canvas id="c1" width="800" height="600">
- </canvas>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0722/327005.html