最近一直在学习前端知识,非常感谢慕课网以及 w3school 的教程让我快速的学习到一门技能,今天学到了如何利用 canvas 来画出一个时钟,雕虫小技,大神勿喷。
对于 canvas,w3shcool 上是这么描述的:
html5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。
不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。
目前网上有很多样式的 canvas 时钟的 dome,如下:
代码网上也是一大堆,大家可以自行百度搜索。
下面是我在慕课网学到的并稍加调整的代码
html 代码
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8">
- <title>
- clock
- </title>
- <style type="text/CSS">
- div{ text-align: center; margin-top: 250px; }
- </style>
- </head>
- <body>
- <div>
- <canvas id="clock" width="200px" height="200px" style="border:1px solid #c3c3c3;">
- 您的浏览器不兼容canvas
- </canvas>
- </div>
- <script type="text/javascript" src="canvas.js">
- </script>
- </body>
- </html>
js 代码
- var dom = document.getElementById('clock');
- var ctx = dom.getContext('2d');
- var width = ctx.canvas.width;
- var height = ctx.canvas.height;
- var r = width / 2;
- //定义钟盘
- function drawBackground(){
- ctx.save();
- ctx.translate(r, r);
- ctx.beginPath();
- ctx.lineWidth = 10;
- ctx.font ='18px Arial';
- ctx.textAlign = 'center'
- ctx.textBaseline = 'middle'
- 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];
- //遍历获取坐标
- 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.arc(x, y, 2, 0, 2 * Math.PI, false);
- ctx.fillStyle = '#000';
- }else{
- ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
- ctx.fillStyle = '#ccc';
- }
- 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,second){
- ctx.save();
- ctx.beginPath();
- var rad = 2 * Math.PI / 60 * minute;
- var srad = 2 * Math.PI / 60 /60 * second;
- ctx.rotate(rad + srad);
- ctx.lineWidth = 3;
- ctx.lineCap= 'round';
- ctx.moveTo(0 ,10);
- ctx.lineTo(0 ,-r + 18);
- ctx.stroke();
- ctx.restore();
- }
- //定义秒钟
- function drawSecond(second){
- ctx.save();
- ctx.beginPath();
- var rad = 2 * Math.PI / 60 * second;
- ctx.rotate(rad);
- ctx.lineWidth = 3;
- ctx.lineCap= 'round';
- ctx.moveTo(-2 ,20);
- ctx.lineTo( 2, 20);
- ctx.lineTo( 1, -r + 18);
- ctx.lineTo( -1, -r + 18);
- ctx.fillStyle = '#c14543';
- 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, height);
- var now = new Date();
- var hour = now.getHours();
- var minute = now.getMinutes();
- var second = now.getSeconds();
- drawBackground();
- drawHour(hour,minute);
- drawMinute(minute,second);
- drawSecond(second);
- drawDot();
- ctx.restore();
- }
- setInterval(draw, 1000);
2.js 中函数顺序不能乱,否则会被清除而没有效果。
3. 代码里高度宽度均为具体 px 值,画布大小会影响时钟美观(解决方案:设置一个比例变量,其值为 width/200, 将高度宽度用变量值来代替)。
这一步非常的简单,
1. 公告栏先需要申请 JS 权限。
2. 将自己的 JS 文件上传到博客的文件里,得到地址,以下是我文件里的地址。(大家可以直接使用)
- http: //files.cnblogs.com/files/lixu880/canvas.js
3. 将下面代码贴入博客侧边栏公告。
- <div class="clockdiv">
- <canvas id="clock" width="200px" height="200px">
- 您的浏览器不兼容canvas
- </canvas>
- <div>
4. 将下面代码贴入页面定制 CSS 代码。(加个 DIV 是为了使时钟在不同博客样式中的公告栏中居中显示)
- .clockdiv{
- text-align: center;
- }
5. 自定义你的样式,使其具有个性化
希望大家打造出一个自己喜欢的具有个性的博客
来源: http://www.cnblogs.com/lixu880/p/6403495.html