H5新功能：canvas画布时钟-蒲公英云

用canvas画一个简单的时钟。（我画的很丑，可以自己改动…）

点我看效果

直接上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>clock</title>
        <style type="text/css"> div{ text-align: center; } </style>
    </head>
    <body>
        <div>
            <canvas id="canvas" width="400px" height="400px"></canvas>
        </div>
        <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var w = canvas.width; var h = canvas.height; var r = w/2; function fun () { context.save(); context.translate(r,r); context.beginPath(); context.strokeStyle = "black"; //对齐数字 context.textAlign = "center"; context.textBaseline = "middle"; // context.strokeStyle = "rgb("+ a +","+b+","+c+")"; var gard=context.createLinearGradient(0,-r,0,r); gard.addColorStop(0,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"); gard.addColorStop(0.2,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"); gard.addColorStop(0.3,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"); gard.addColorStop(0.4,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"); gard.addColorStop(0.5,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"); gard.addColorStop(0.6,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"); gard.addColorStop(0.7,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"); gard.addColorStop(0.8,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"); gard.addColorStop(1,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"); context.strokeStyle = gard; context.lineWidth = 10; context.arc(0,0,r-5,0,Math.PI*2,false) context.closePath(); context.stroke(); //首先，用一个数组将所有的小时数存放起来 var hoursnum = [3,4,5,6,7,8,9,10,11,12,1,2]; for (var i=0;i<hoursnum.length;i++) { //首先得把弧度确定出来 var rad = (Math.PI*2)/12 * i; //然后确定小时数的对应在重新映射画布里的坐标 var x = Math.cos(rad) * (r-30); var y = Math.sin(rad) * (r-30); //输出 context.fillText(hoursnum[i],x,y); } //绘制60个计时点 for (var j=0;j<60;j++) { //首先得把弧度确定出来 var rad = (Math.PI*2)/60 * j; //然后确定小时数的对应在重新映射画布里的坐标 var x = Math.cos(rad) * (r-18); // 邻边/斜边 var y = Math.sin(rad) * (r-18); // 对边/斜边 context.beginPath(); if (j%5 == 0) { context.fillStyle = "black"; context.arc(x,y,2,0,Math.PI*2,false); } else{ context.fillStyle = "bisque"; context.arc(x,y,2,0,Math.PI*2,false); } //输出 context.closePath(); context.fill(); } } //绘制时针 function drawhours (hour,minus) { context.save(); // 保存当前环境的状态 context.beginPath(); // rotate(angle) 方法旋转当前的绘图 , 传递的参数为弧度; var rad = Math.PI*2/12 *hour; var radm = Math.PI*2/12/60 *minus; context.rotate(rad); context.lineWidth = 6; context.lineCap = "round"; context.moveTo(0,10); context.lineTo(0,-(r/2-15)); context.stroke(); context.restore(); //返回之前保存过的路径状态和属性 } // drawhours(3,30); 测试方法 //绘制分针 function drawminus (minus) { context.save(); context.beginPath(); var rad = Math.PI*2/60 *minus; context.rotate(rad); //W3C: 设置线条的圆角 context.lineWidth = 4; context.lineCap = "round"; context.moveTo(0,10); context.lineTo(0,-(r-45)); // context.closePath(); context.stroke(); context.restore(); } // drawminus(30); //绘制秒针 function drawseco (seco) { context.save();//保存 context.beginPath(); // context.strokeStyle = "red"; var rad = Math.PI*2/60 *seco; context.rotate(rad); //W3C: 设置线条的圆角 context.lineWidth = 4; context.lineCap = "round"; context.moveTo(2,15); context.lineTo(0,-(r-45)); context.lineTo(-2,15); context.lineTo(1,15); context.closePath(); context.stroke(); context.restore(); } // drawseco(55); //绘制原点 function drawDot () { context.beginPath(); context.font = "30px arial" context.fillStyle = "#000"; context.arc(0,0,5,0,Math.PI*2,false); context.closePath(); context.fill(); } // drawDot(); //改变秒针原点色 function secoColor () { var time = new Date(); var s = time.getSeconds(); for (var j=0;j<=s;j++) { var rad = (Math.PI*2)/60 * (j-15); var x = Math.cos(rad) * (r-18); var y = Math.sin(rad) * (r-18); var a = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); var c = Math.floor(Math.random()*256); context.save(); context.beginPath(); context.fillStyle = "rgb("+a +","+ b +","+c+")"; context.arc(x,y,4,0,Math.PI*2,false); context.closePath(); context.fill(); context.restore(); } function fun1 () { var time = new Date(); var s = time.getSeconds(); for (var h=0;h<s;h++) { var a = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); var c = Math.floor(Math.random()*256); var rr = 0; // context.save(); context.beginPath(); context.fillStyle = "rgb("+a +","+ b +","+c+")"; rr = h + 15; context.arc(0,0,rr+10,0,Math.PI*2,false); context.closePath(); context.fill(); } } fun1(); } //写方法，使时钟动起来 setInterval(function () { context.clearRect(0,0,w,h); var datenow = new Date(); var hour = datenow.getHours(); var minu = datenow.getMinutes(); var seco = datenow.getSeconds(); //测试用代码： var hour = 5; // var minu = 30; // var seco = 5; var hourtext; var minutext; var secotext; fun(); secoColor(); // fun11(); drawhours(hour,minu); drawminus(minu); drawseco(seco); drawDot(); //小时 if(hour<10){ hourtext = "0" + hour; }else{ hourtext = hour; } //分钟 if(minu<10){ minutext = "0" + minu; }else{ minutext = minu; } //秒钟 if(seco<10){ secotext = "0" + seco; }else{ secotext = seco; } context.fillText( hourtext +":"+minutext+":"+secotext, 0, 100); context.restore(); },1000) </script>
    </body>
</html>