小菜鸟新进博客园，发布一个时钟来纪念一下这个历史性的时刻！介于我比较喜欢那些循循善诱的教学方法，我也将遵循这种方式，一步一步讲述这个过程。让我们开始吧~
准备工作： 首先新建一个空的Web应用程序，并新建一个页面
进入正题了！
1. 创建一个< canvas>
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormClock.aspx.cs" Inherits="MyClock.WebFormClock" %> 2 <!DOCTYPE html> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head runat="server"> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 6 <title></title> 7 </head> 8 <body> 9 <form id="form1" runat="server"> 10 <div> 11 <canvas id="myCanvas" width="200" height="200"></canvas> 12 13 </div> 14 </form> 15 </body> 16 </html>
上面指定了画布的尺寸，长宽各200~
2. 接下来我们将使用javascript来对上面的画布进行绘制
<body>
<form id="form1" runat="server">
<div>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
</script>
</div>
</form>
</body>
我们现在获取了画布的对象，并建立了一个2d的绘画环境
那么一个时钟首先要有他的刻度表盘吧，所以我们现在来绘制它
3. 绘制表盘
ctx.beginPath(); ctx.translate(100, 100); ctx.rotate(-Math.PI / 2); ctx.save(); for (var i = 0; i < 60; i += 5) { ctx.fillRect(84, -3, 10, 6); ctx.rotate(Math.PI / 6); } ctx.closePath();
我们将画布的坐标系原点移至画布的中心，并将画布旋转-90度，然后保存这个状态！
然后使用循环语句绘制刻度盘（每画一个刻度，画板选装30度）
效果图如下：
4. 绘制指针
var slen = 60;
var mlen = 48;
var hlen = 35;
var s = 0, m = 0, h = 0;
function Refresh() {
var time = new Date();
s = time.getSeconds();
m = time.getMinutes();
h = time.getHours();
//画时针
ctx.fillStyle = '#555555';
ctx.rotate((h + m / 60) * Math.PI / 6);
ctx.fillRect(-8, -2, hlen, 4);
ctx.restore();
ctx.save();
//画分针
ctx.fillStyle = '#555555';
ctx.rotate((m + s / 60) * Math.PI / 30);
ctx.fillRect(-10, -1.5, mlen, 3);
ctx.restore();
ctx.save();
//画秒针
ctx.rotate(s * Math.PI / 30);
ctx.fillStyle = 'Black';
ctx.fillRect(-12, -1, slen, 2);
}
var MyInterval = setInterval("Refresh();", 1000);
开始的slen,mlen,hlen是我所定义的指针长度的常量
因为时钟需要每秒刷新状态，所以我们将整个情况放在一个方法内（Refresh），在最后让这个方法每秒执行一次
然后就有了这样的效果：
5. 擦除之前的笔画
html5的画布，那也是画布嘛，一个劲的往上画而不擦除以前的笔画，那肯定就会变成这样：
这真的太不科学了！所以我们对以前的内容进行清除
//以下为清除画板内容
{
ctx.globalCompositeOperation = "destination-out";
ctx.strokeStyle = "rgba(250,250,250,0)";
ctx.beginPath();
ctx.arc(0, 0, 83, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.globalCompositeOperation = "source-over";
ctx.restore();
ctx.save();
}
6. 让他变的更漂亮
仅仅上面这个样子，明显是不能满足我们对美的渴望的~那么我们现在来让秒针变得更加个性化
那么接下来，我将去除传统意义上的秒针，用扇形来表示现在的秒针
//用扇形来表示秒
var radialgradient = ctx.createRadialGradient(0, 0, 10, 0, 0, 83);
radialgradient.addColorStop(0.4, '#c4f2ff');
radialgradient.addColorStop(1, "rgba(250,250,250,0)");
ctx.fillStyle = radialgradient;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arc(0, 0, 82, 0, s * Math.PI / 30, false);
ctx.closePath();
ctx.fill();
ctx.restore();
ctx.save();
这样子的话，我们就用扇形扫过的区域来表示当前的秒数了，并且在上面使用了径向渐变3
效果如下：
7.很好很好，已经基本大功告成了~
但是我想让他变得更加好玩一些，那就让当前的分钟数，来决定扇形的颜色好了~
var colorarray = ['#c4f2ff', '#dadada', '#baffe7', '#ffd7ba', '#fffdba', '#deffba', '#baffc4', '#bac9ff', '#ffbaeb', '#ffbaba'];
//用扇形来表示秒
var radialgradient = ctx.createRadialGradient(0, 0, 10, 0, 0, 83);
radialgradient.addColorStop(0.4, colorarray[m % 10]);
radialgradient.addColorStop(1, "rgba(250,250,250,0)");
ctx.fillStyle = radialgradient;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arc(0, 0, 82, 0, s * Math.PI / 30, false);
ctx.closePath();
ctx.fill();
ctx.restore();
ctx.save();
我申明了一个有10种颜色的数组，然后根据现在分钟数除以10的余数来决定用哪一种~
8. 最后的完整代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormClock.aspx.cs" Inherits="MyClock.WebFormClock" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 8 <title></title> 9 </head> 10 <body> 11 <form id="form1" runat="server"> 12 <div> 13 <canvas id="myCanvas" width="200" height="200"></canvas> 14 <script type="text/javascript"> 15 var colorarray = ['#c4f2ff', '#dadada', '#baffe7', '#ffd7ba', '#fffdba', '#deffba', '#baffc4', '#bac9ff', '#ffbaeb', '#ffbaba']; 16 var c = document.getElementById("myCanvas"); 17 var ctx = c.getContext("2d"); 18 19 ctx.beginPath(); 20 ctx.translate(100, 100); 21 ctx.rotate(-Math.PI / 2); 22 ctx.save(); 23 24 25 for (var i = 0; i < 60; i += 5) { 26 ctx.fillRect(84, -3, 10, 6); 27 ctx.rotate(Math.PI / 6); 28 } 29 ctx.closePath(); 30 31 var slen = 60; 32 var mlen = 48; 33 var hlen = 35; 34 35 var s = 0, m = 0, h = 0; 36 37 function Refresh() { 38 39 var time = new Date(); 40 s = time.getSeconds(); 41 m = time.getMinutes(); 42 h = time.getHours(); 43 44 //以下为清除画板内容 45 { 46 ctx.globalCompositeOperation = "destination-out"; 47 ctx.strokeStyle = "rgba(250,250,250,0)"; 48 ctx.beginPath(); 49 ctx.arc(0, 0, 83, 0, 2 * Math.PI); 50 ctx.closePath(); 51 ctx.fill(); 52 ctx.globalCompositeOperation = "source-over"; 53 ctx.restore(); 54 ctx.save(); 55 } 56 57 //以下为绘画 58 //用扇形来表示秒 59 var radialgradient = ctx.createRadialGradient(0, 0, 10, 0, 0, 83); 60 radialgradient.addColorStop(0.4, colorarray[m % 10]); 61 radialgradient.addColorStop(1, "rgba(250,250,250,0)"); 62 ctx.fillStyle = radialgradient; 63 ctx.beginPath(); 64 ctx.moveTo(0, 0); 65 ctx.arc(0, 0, 82, 0, s * Math.PI / 30, false); 66 ctx.closePath(); 67 ctx.fill(); 68 ctx.restore(); 69 ctx.save(); 70 //画时针 71 ctx.fillStyle = '#555555'; 72 ctx.rotate((h + m / 60) * Math.PI / 6); 73 ctx.fillRect(-8, -2, hlen, 4); 74 ctx.restore(); 75 ctx.save(); 76 //画分针 77 ctx.fillStyle = '#555555'; 78 ctx.rotate((m + s / 60) * Math.PI / 30); 79 ctx.fillRect(-10, -1.5, mlen, 3); 80 ctx.restore(); 81 ctx.save(); 82 ////画秒针 83 //ctx.rotate(s * Math.PI / 30); 84 //ctx.fillStyle = 'Black'; 85 //ctx.fillRect(-12, -1, slen, 2); 86 } 87 88 var MyInterval = setInterval("Refresh();", 1000); 89 </script> 90 </div> 91 </form> 92 </body> 93 </html>
OK~