通过H5的新标签canvas做出一个时钟的全过程,希望对初学者有帮助
2017-09-01 14:37
627 查看
最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去。接下来我将和你们分享如何制作这个时钟。
在body中添加canvas标签:
此处大小样式可以自行设置为图方便我就写在标签中了。
接下来就是javascript代码的书写了
window加载完之后,先get到canvas 然后通过getContext方法判断你的浏览器是否支持canvas
保证浏览器支持后再else中就开始画时钟了
首先画出大圆盘
接下来是将数字画上去 上面注释过的就不再重复注释了
画出大刻度盘
画出小刻度
在中间添加文字,你可以随意添加任何你想要的文字
创建一个实时时间
接下来就是画上时针、分针、秒针了
秒针
分针
时针
给中间加一个方块
最后要让这个时钟自己转动起来
好了,到这里就完成了,是不是感觉很简答,你还在等什么,赶快动手制作一个炫酷的时钟吧。
在body中添加canvas标签:
<canvas id="myCanvas" width="600px" height="600px" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
此处大小样式可以自行设置为图方便我就写在标签中了。
接下来就是javascript代码的书写了
window.onload = function(){ var myCanvas = document.getElementById("myCanvas"); if (!myCanvas.getContext) { alert("Your browser does not support the canvas element."); } else {......} }
window加载完之后,先get到canvas 然后通过getContext方法判断你的浏览器是否支持canvas
保证浏览器支持后再else中就开始画时钟了
var myContext = myCanvas.getContext("2d"); //指定二维绘图 可以把myContext看做是一个画笔
首先画出大圆盘
var deg = 2 * Math.PI / 12; myContext.fillStyle="#0000ff"; //设置所围区域填充色 myContext.strokeStyle="gray"; //设置画的线的填充色 也就是最外面的一圈线 myContext.lineWidth=2; //设置线的宽度 myContext.save(); myContext.beginPath(); //开始作图 myContext.translate(300,300); //将原点移动到指定位置,这个位置就被看做是新的原点了 myContext.moveTo(0,-200); //将画笔移动到指定位置,这里(300,300)是圆心所以我把它移动到圆的最上端开始画图 for(var i = 0 ; i < 13 ; i++){ var x = Math.sin(i * deg); var y = Math.cos(i * deg); myContext.lineTo( x * 200, - y * 200); } myContext.fill(); //调用fill进行填充颜色 myContext.stroke(); //调用stroke将线的颜色涂上 myContext.closePath(); //关闭画笔 myContext.restore(); //重置画笔
接下来是将数字画上去 上面注释过的就不再重复注释了
my 4000 Context.save(); myContext.beginPath(); myContext.translate(300,300); for(var i =1 ;i < 13 ; i++){ var xl = Math.sin(i * deg); var yl = Math.cos(i * deg); myContext.fillStyle="#ffffff"; myContext.font="blod 20px Calibri"; //设置字体 myContext.textBaseline='middle'; //设置在绘制文本时的当前文本基线 middle文本基线是 em 方框的正中 myContext.fillText(i,xl * 180 -5 , - yl * 180 ); //第一个参数是所写的文本,后面两个是坐标 } myContext.closePath(); myContext.restore();
画出大刻度盘
myContext.save(); myContext.beginPath(); myContext.translate(300,300); for(var i = 0 ; i < 12 ; i++) { var xo = Math.sin(i * deg); var yo = Math.cos(i * deg); myContext.moveTo( xo * 198 ,- yo * 198); myContext.lineTo( xo * 187 , - yo * 187); } myContext.strokeStyle = "#ffffff"; myContext.lineWidth=4; myContext.stroke(); myContext.closePath(); myContext.restore();
画出小刻度
var deg0 = 2 * Math.PI/60; myContext.save(); myContext.beginPath(); myContext.translate(300,300); for( var i = 0 ; i < 60 ; i++){ var xh = Math.sin(i * deg0); var yh = Math.cos(i * deg0); myContext.moveTo( xh * 194 , - yh * 194); myContext.lineTo( xh * 187 , - yh * 187); } myContext.strokeStyle = "#ffffff"; myContext.lineWidth=2; myContext.stroke(); myContext.closePath(); myContext.restore();
在中间添加文字,你可以随意添加任何你想要的文字
myContext.save(); myContext.font = '60px sans-serif'; myContext.textAlign = 'center'; myContext.textBaseline = "middle"; myContext.strokeText("canvas",300,400); myContext.restore();
创建一个实时时间
var time = new Date(); var h = (time.getHours() % 12) * 2 * Math.PI/12; var m = time.getMinutes() * 2 * Math.PI/60; var s = time.getSeconds() *2 * Math.PI/60;
接下来就是画上时针、分针、秒针了
秒针
myContext.save(); myContext.beginPath(); myContext.translate(300,300); myContext.rotate(s); myContext.moveTo(0,0); myContext.lineTo(0,-180); myContext.strokeStyle = "#ffffff"; myContext.lineWidth = 2; myContext.stroke(); myContext.closePath(); myContext.restore();
分针
myContext.save(); myContext.beginPath(); myContext.translate(300,300); myContext.rotate( m + s /60); myContext.moveTo(0,0); myContext.lineTo(0,-150); myContext.strokeStyle = "#ffffff"; myContext.lineWidth = 4; myContext.stroke(); myContext.closePath(); myContext.restore();
时针
myContext.save(); myContext.beginPath(); myContext.translate(300,300); myContext.rotate(h + m/60); myContext.moveTo(0,0); myContext.lineTo(0,-120); myContext.strokeStyle = "#ffffff"; myContext.lineWidth = 6; myContext.stroke(); myContext.closePath(); myContext.restore();
给中间加一个方块
myContext.save(); myContext.beginPath(); myContext.fillStyle="#ffffff"; myContext.fillRect(290,290,20,20); myContext.closePath(); myContext.restore();
最后要让这个时钟自己转动起来
setTimeout(arguments.callee,1000);
好了,到这里就完成了,是不是感觉很简答,你还在等什么,赶快动手制作一个炫酷的时钟吧。
相关文章推荐
- 写了一个很简单API串口编程的源代码,调试通过,希望给需要的人有所帮助
- canvas标签结合javascript做出动态时钟效果
- Android一个画图的例子,希望对画图初学者有帮助
- 续昨日 学习案例 -希望通过实际的案例帮助初学者
- 再次免费发一个Qt教程,希望能帮助各位Qt初学者快速入门
- 通过HTML5标签canvas绘制一个八卦图案
- 第四周上机任务--任务三--设计一个“正整数”类,并通过一系列的成员函数对其性质进行做出判断(VS2008)
- 用html5的canvas画一个可以动的时钟
- 通过制作一个简单的时钟学习WPF中DispatcherTimer的使用 Level 100
- 一个传统的页面设计(希望对你有帮助)
- 通过创建一个位图的XY Chart来学习Android绘图类Rect,Paint,Bitmap,Canvas(附源码)
- 一个Java小程序,帮助理解Java继承中的初始化过程
- js 利用canvas标签画一个存储按钮(附加svg动态按钮)
- 使用HTML5 Canvas绘制一个时钟
- 作为流行的EDA 工具之一Cadence 一直以来都受到了广大EDA 工程师的青睐,然而Cadence 的使用之繁琐又给广大初学者带来了不少麻烦,希望本专栏的内容能给大家带来些帮助!
- 分享一个帮助你自定义标签并且兼容现代浏览器的javascript类库 : X-tag
- CrossWalk增加一个新标签的过程记录
- 做了一个关于水晶报表的示例,希望对大家有帮助
- 使用HTML5的canvas做一个会动的时钟
- 一个高效率SQL储存过程分页,执行效率测试通过500万以上的数据