原创爱学习的猪小蛋随笔知识储备 & Demo601 阅读 2016-11-10 11:56:41
最近学习了下 canvas~, 做了个经典的时钟 demo 练习, 记录一下. 网上也很多人做过, 没做过的同学可以试试~~
html 代码
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta http-equiv="Content-Type" content="text/HTML; charset=UTF-8">
- <title>canvas clock</title>
- </head>
- <body>
- <canvas id="clock" width="500" height="500" style="background-color:black;">
- A drawing of something.
- </canvas>
- <script type="text/JavaScript">
- var canvas = document.getElementById("clock");
- function drawClock(){
- // 确认浏览器支持 canvas 元素
- if(canvas.getContext){
- var context= canvas.getContext("2d");
- // 清空画布
- context.clearRect(0,0,canvas.width,canvas.height);
- /* 绘制表盘 */
- context.strokeStyle = "#00FFFF";
- context.lineWidth = 10;
- context.beginPath();
- // 圆心在 (250,250)
- context.arc(250,250,200,0,Math.PI*2);
- context.stroke();
- // 每部分花完要及时关闭路径, 避免产生多余的线条
- context.closePath();
- /* 绘制时刻度 */
- for(var i=0;i<12;i++){
- // 保存当前设置
- context.save();
- context.lineWidth = 7;
- context.strokeStyle = "#FFFF00";
- // 设置表盘圆心为原点
- context.translate(250, 250);
- // 设置旋转弧度, 弧度 = 角度 * Math.PI/180
- context.rotate(30 * i * Math.PI / 180);
- context.beginPath();
- context.moveTo(0, -175);
- context.lineTo(0, -195);
- context.stroke();
- context.closePath();
- // 把恢复原来的 context 设置
- context.restore();
- }
- /* 绘制分刻度 */
- for(var i=0;i<60;i++){
- context.save();
- context.lineWidth = 5;
- context.strokeStyle = "#FFFF00";
- context.translate(250, 250);
- // 设置分针旋转弧度
- context.rotate(6 * i * Math.PI / 180);
- context.beginPath();
- context.moveTo(0, -185);
- context.lineTo(0, -195);
- context.stroke();
- context.closePath();
- context.restore();
- }
- /* 绘制时分秒针 */
- // 获取当前时间
- var nowTime = new Date();
- var hour = nowTime.getHours();
- var min = nowTime.getMinutes();
- var sec = nowTime.getSeconds();
- // 时针要加上 min 的百分比, 分针同理
- hour += min/60;
- min += sec/60;
- // 根据当前时间设置各针角度
- // 时针
- context.save();
- context.lineWidth = 7;
- context.strokeStyle = "#00FFFF";
- context.translate(250, 250);
- context.rotate(hour * 30 * Math.PI / 180);// 每小时旋转 30 度
- context.beginPath();
- context.moveTo(0, -130);
- context.lineTo(0, 10);// 稍长于原点比较真实
- context.stroke();
- context.closePath();
- context.restore();
- // 分针
- context.save();
- context.lineWidth = 5;
- context.strokeStyle = "#FFFF00";
- context.translate(250,250);
- context.rotate(min * 6 * Math.PI / 180);
- context.beginPath();
- context.moveTo(0, -150);
- context.lineTo(0, 10);
- context.stroke();
- context.closePath();
- context.restore();
- // 秒针
- context.save();
- context.lineWidth = 3;
- context.strokeStyle = "#FF0000";
- context.translate(250,250);
- context.rotate(sec * 6 * Math.PI / 180);
- context.beginPath();
- context.moveTo(0, -170);
- context.lineTo(0, 10);
- context.stroke();
- context.closePath();
- // 美化表盘, 画中间的小圆
- context.beginPath();
- context.arc(0, 0, 7, 0, Math.PI*2);
- context.fillStyle = "#FFFF00";
- context.fill();
- context.strokeStyle = "#FF0000";
- context.stroke();
- context.closePath();
- // 秒针上的小圆
- context.beginPath();
- context.arc(0, -140, 7, 0, Math.PI*2);
- context.fillStyle = "#FFFF00";
- context.fill();
- context.stroke();
- context.closePath();
- // 在这里恢复设置, 可以保证小圆也跟着秒针
- context.restore();
- }
- }
- //setInterval 一秒后执行, 先 drawClock() 一个, 去掉延迟效果
- drawClock();
- // 每秒刷新一次
- setInterval(drawClock, 1000);
- </script>
- </body>
- </HTML>
JavaScript
canvas
评论
2
喜欢
4
赞
0
评论 ( 2 )
走你
最新评论
来源: http://www.qdfuns.com/article/36539/2410884b4e3454fc54de1e16ffa56dc1.html