Canvas绘制时钟(学习笔记)
2017-02-14 20:15
337 查看
Html 5的Canvas参考手册:http://www.w3school.com.cn/tags/html_ref_canvas.asp
Canvas绘制时钟学习视频:http://www.imooc.com/learn/612
Demo和学习笔记
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas clocks</title>
<style type="text/css">
div{
text-align:center;
margin-top:150px;
}
#clock{
border:1px solid #ccc;
}
</style>
</head>
<body>
<div>
<canvas id="clock" height="400px" width="400px"></canvas>
</div>
<!-- 注意JS的执行时间点 -->
<script type="text/javascript" src="js/clock.js"></script>
</body>
</html>
clock.js
总结:
通过视频学习,熟悉了html 5的canvas标签使用。在学习中,通过参考API文档了解每一个标签、属性、函数等的使用方法,对于前端学习很有帮助。
另外,在这段视频的学习中也遇到了一点小问题。在JavaScript的引用时,需要注意函数的执行时间点,并不是每一个JavaScript的引用部分都可以放在<head></head>中,有的时候可能会因为内容还未加载,就先执行了JS脚本,从而JS在获取id的时候值为null。这段时钟代码就是需要先加载canvas画布,然后再去执行JS部分获取其id值。
Canvas绘制时钟学习视频:http://www.imooc.com/learn/612
Demo和学习笔记
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas clocks</title>
<style type="text/css">
div{
text-align:center;
margin-top:150px;
}
#clock{
border:1px solid #ccc;
}
</style>
</head>
<body>
<div>
<canvas id="clock" height="400px" width="400px"></canvas>
</div>
<!-- 注意JS的执行时间点 -->
<script type="text/javascript" src="js/clock.js"></script>
</body>
</html>
clock.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; var rem=width/200; //自适应大小像素的比例设置 function drawBackground(){ ctx.save(); ctx.translate(r,r); //重新定义原点位置 ctx.beginPath(); //起始路径 ctx.lineWidth=10*rem; ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,false); ctx.stroke(); //绘制方式 var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2]; ctx.font=18*rem+'px Arial'; //居中对齐 ctx.textAlign='center'; ctx.textBaseline='middle'; //遍历数字 hourNumbers.forEach(function(number,i){ var rad=2*Math.PI/12*i; //弧度 var x=Math.cos(rad)*(r-30*rem); var y=Math.sin(rad)*(r-30*rem); 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*rem); var y=Math.sin(rad)*(r-18*rem); ctx.beginPath(); if(i%5==0){ ctx.fillStyle='#000'; ctx.arc(x,y,2*rem,0,2*Math.PI,false); } else{ ctx.fillStyle='#ccc'; ctx.arc(x,y,2*rem,0,2*Math.PI,false); } 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*rem; ctx.lineCap='round'; //起始样式 ctx.moveTo(0,10*rem); ctx.lineTo(0,-r/2); ctx.stroke(); ctx.restore(); } //分针指针 function drawMinute(minute){ ctx.save(); ctx.beginPath(); var rad=2*Math.PI/60*minute; ctx.rotate(rad); //旋转 ctx.lineWidth=3*rem; ctx.lineCap='round'; //起始样式 ctx.moveTo(0,10*rem); ctx.lineTo(0,-r+30*rem); ctx.stroke(); ctx.restore(); } //秒针指针 function drawSecond(second){ ctx.save(); ctx.beginPath(); ctx.fillStyle='#c14543'; var rad=2*Math.PI/60*second; ctx.rotate(rad); //旋转 //秒针样式 ctx.moveTo(-2*rem,20*rem); ctx.lineTo(2*rem,20*rem); ctx.lineTo(1,-r+18*rem); ctx.lineTo(-1,-r+18*rem); ctx.fill(); ctx.restore(); } //绘制圆点 function drawDot(){ ctx.beginPath(); ctx.fillStyle='#fff'; ctx.arc(0,0,3*rem,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); drawSecond(second); drawDot(); ctx.restore(); } draw(); //每秒执行一次函数 setInterval(draw,1000);
总结:
通过视频学习,熟悉了html 5的canvas标签使用。在学习中,通过参考API文档了解每一个标签、属性、函数等的使用方法,对于前端学习很有帮助。
另外,在这段视频的学习中也遇到了一点小问题。在JavaScript的引用时,需要注意函数的执行时间点,并不是每一个JavaScript的引用部分都可以放在<head></head>中,有的时候可能会因为内容还未加载,就先执行了JS脚本,从而JS在获取id的时候值为null。这段时钟代码就是需要先加载canvas画布,然后再去执行JS部分获取其id值。
相关文章推荐
- HTML5学习笔记之使用canvas绘制矩形
- HTML5学习笔记14-Canvas绘制渐变图形与绘制变形图形
- HTML5 之Canvas标签学习笔记之二:绘制矩形
- 【js学习笔记-113】------<canvas>绘制和填充曲线
- 自定义View学习笔记07—Canvas绘制文字
- 学习笔记:HTML5 Canvas绘制简单图形
- Canvas学习之绘制时钟
- canvas学习笔记:绘制各种图形
- Canvas学习笔记二——图形绘制
- HTML5 Canvas学习笔记之详解弧线的绘制
- 【canvas学习笔记二】绘制图形
- 自定义View学习笔记04—Canvas的绘制图形
- 【canvas学习笔记四】绘制文字
- 自定义View学习笔记06—Canvas绘制图片
- 【canvas学习笔记二】绘制图形
- HTML5 学习笔记15-Canvas图形绘制处理
- html5学习笔记二:利用canvas绘制简单图形
- html5 学习笔记 API canvas1 绘制对角线
- canvas学习笔记(下篇) -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例(星空/时钟/小球)
- D3D学习笔记:绘制