最近看了一些HTML5的网页,感觉很高端,于是开始上手HTML5,跟着网上的视频学,收获还是不小,今天说说这几天学的HTML5新加的canvas标签,通过写这篇博客来巩固一下这几天学到的东西。
canvas标签是是HTML5新加的绘制背景的,但是正像"canvas"的意思“画布”一样,它只是一张给别人在上面画东西的东西,就像我们小学时的美术本一样是给我们来 画画的纸,自己并不能画什么东西,所以要想在布上绘制东西就需要借助canvas 的API和javascript操作实现画图或者其他的一些操作。
canvas有一些自己常用的属性,如"id","width","height","style...."不用说 ,width和height属性是设置画布的大小的,也就是规定我们所能作图的区域,style属性可以设置画布的背景颜色,同时"id"是每一个画布对象都必须要有的,因为在下面用javascript来操作canvas画布的时候要用到。
下面具体介绍一下使用HTML5来在网页上绘制一个显示当前系统时间的时钟。
Step 1:创建一个画布,并指定大小和id,同时给画布加上一个背景色
<canvas id = "clock" width = "500" height ="500" style = "background:gray"> 你的浏览器太老了不支持canvs标签,看不到时钟! </canvas>
Step2:在script中通过document.getElementById()来得到画布,同时使用getContext()方法来返回一个对象 指出访问绘图功能必要的API
<script> var clock = document.getElenmentById("clock"); var cxt = clock.getContext('2d'); </script>
Step3:使用的到的cxt进行各种属性的设置和绘制了,上代码:
<script> var clock = document.getElementById('clock'); var cxt = clock.getContext('2d'); function drawClock() { //清屏,可以看到针在移动 cxt.clearRect(0,0,500,500); //得到系统当前的时间 var now = new Date(); //得到时分秒 var sec = now.getSeconds(); var min = now.getMinutes(); var hour = now.getHours(); //小时是浮点数 类型要得到时针准确的位置,必须将当前的分钟也转换为//小时 hour = hour+min/60; //将24小时转化为12小时制 hour =(hour>12)?(hour-12):hour; //绘制表盘 cxt.lineWidth=10; cxt.strokeStyle = "blue"; cxt.beginPath(); cxt.arc(250,250,200,0,360,false); cxt.stroke(); cxt.closePath(); //绘制刻度 //时刻度 for(var i = 0; i < 12; i++) { cxt.save(); //设置时针的粗细 cxt.lineWidth = 7; //设置时针的颜色 cxt.strokeStyle="#000"; //设置异次元空间的0,0点 cxt.translate(250,250); //再设置旋转角度 cxt.rotate(i*30*Math.PI/180); //开始绘制 cxt.beginPath(); cxt.moveTo(0,-170); cxt.lineTo(0,-190); cxt.stroke(); cxt.closePath(); cxt.restore(); } //分刻度 for(var i = 0; i < 60; i++) { cxt.save(); //设置分刻度的粗细 cxt.lineWidth = 5; //设置分刻度的颜色 cxt.strokeStyle = "#123"; //设置或者重置画布的0,0点 cxt.translate(250,250); //设置旋转的角度 cxt.rotate(i*6*Math.PI/180); //开始绘制 cxt.beginPath(); cxt.moveTo(0,-180); cxt.lineTo(0,-190); cxt.stroke(); cxt.closePath(); cxt.restore(); } //时针 cxt.save(); //设置时针风格 cxt.lineWidth = 7; //设置时针的颜色 cxt.strokeStyle = "#000" ; //设置异次元空间的0,0点 cxt.translate(250,250); //设置旋转的角度 cxt.rotate(hour*30*Math.PI/180); //开始绘制 cxt.beginPath(); cxt.moveTo(0,-140); cxt.lineTo(0,10); cxt.stroke(); cxt.closePath(); cxt.restore(); //分针 cxt.save(); //设置分针的风格 cxt.lineWidth = 5; cxt.strokeStyle = "#000"; //设置异次元空间分针画布的圆心 cxt.translate(250,250); //设置旋转角度 cxt.rotate(min*6*Math.PI/180); //开始绘制 cxt.beginPath(); cxt.moveTo(0,-160); cxt.lineTo(0,15); cxt.stroke(); cxt.closePath(); cxt.restore(); //秒针 cxt.save(); //设置秒针的风格 cxt.lineWidth = 3; cxt.strokeStyle = '#000'; //设置异次元分针画布的圆心 cxt.translate(250,250); //设置旋转角度 cxt.rotate(sec*6*Math.PI/180); //绘制秒针 cxt.beginPath(); cxt.moveTo(0,-170); cxt.lineTo(0,20); cxt.stroke(); cxt.closePath(); //画出时针,分针,秒针的交叉点 cxt.beginPath(); cxt.arc(0,0,5,0,360,false); //设置填充样式 cxt.fillStyle = "gray"; cxt.fill(); //设置笔触样式(秒针已设置) cxt.stroke(); cxt.closePath(); //设置秒针前段的小圆点 cxt.beginPath(); cxt.arc(0,-150,5,0,360,false); //设置填充样式 cxt.fillStyle="gray"; cxt.fill(); //设置笔触样式(秒针已设置) cxt.stroke(); cxt.closePath(); cxt.restore(); } //使用setInterval(方法名,每隔多少毫秒重绘一下)每隔一段时间重新绘制,看到动的效果 drawClock(); //刷新不出现延迟 setInterval(drawClock,1000); </script>
在上面的代码中主要就是标红加粗 的那几个属性和方法下面细说一下:
getContext() |
返回一个对象,指出访问绘图功能必要的API |
lineWidth |
设置或返回当前的线条宽度(1--10) |
strokeStyle |
设置或返回用于笔触的颜色、渐变或模式(线条的) |
beginPath() |
起始一条路径,或重置当前路径,每画一个新的图形都要重置一个新的路径,不然所有的图会连起来 |
closePath() |
创建从当前点回到起始点的路径,绘图就发生在beginPath()和closePath()中间,有始有终 |
arc() |
创建弧/曲线(用于创建圆形或部分圆),有六个参数,依次是圆心x,y,坐标,半径,画过的幅度,后面的boolean值控制顺时针还是逆时针 |
stroke() |
绘制已定义的路径,不调用这个方法就不会有东西出来。画的是线条,对应的有填充的fill() |
save() |
保存当前环境的状态,主要是用在旋转的时候,对应的是下面的释放restore()方法,他们两个是成对出现 |
restore |
返回之前保存过的路径状态和属性。 |
translate() |
重新映射画布上的 (0,0) 位置,目前我只知道主要用在旋转那里,重置圆心,后面的都要以当前的圆心为标准 |
moveTo() |
把路径移动到画布中的指定点,不创建线条,相当于起始点 |
lineTo() |
添加一个新点,和上面的moveTo()指定的点构成一条直线 |
fillStyle() | 设置填充的样式,颜色,和上面的strokeStyle()对应记忆 |
fill() | 填充当前绘图,没有这个方法也不会有显示,和上面的stroke()对应记忆 |
setInterval() | 指定相应的时间再次执行指定的方法,两个参数,一个是方法名,一个是时间 |
clearRect() |
在给定的矩形内清除指定所画的东西。 |
rotate() | 旋转当前绘图,传入一个角度的参数 |
以上是这个时钟主要用到的canvas中的API和属性,canvas中的属性和方法是很多的,上面只是一小部分,多练练,多用就会熟悉了。
PS:
1.使用HTML5中的canvas绘制一些图像还是很简单的,感觉比java简单多了。
2:本人在网页这一块也是新手一枚,算小白一个,可能很多地方写的也不全面。也可能说法有错误,很多地方知道要那么用,但是具体为什么要那么用 还是没怎么搞懂,引用电路实验老师的一句话就是“原理没搞懂”,慢慢来,一点一点进步咯,抱拳!
相关推荐
html5 canvas画布绘制圆形时钟代码
使用canvas绘制的实时时钟
NULL 博文链接:https://wenhai.iteye.com/blog/2158714
js+html5实现canvas绘制网页时钟的方法.docx
使用canvas绘制微信小程序时钟
使用html5中的canvas标签+jquery绘制的时钟走动代码
JavaScript Canvas绘制时钟
html5 canvas绘制时钟表时间是一款用canvas精灵绘制器绘制的时钟表时间特效。
本文实例讲述了js+html5实现canvas绘制网页时钟的方法,画的是一个可用于网页的、带摆的钟表,可以通过按钮调整其大小和位置,具体实现内容如下 <html> <head> <meta ...
利用html5中的canvas绘制的时钟,动态的呈现当前的时分秒
HTML5 Canvas创意时钟特效是一款基于HTML5和Canvas绘制的圆形个性化时钟动画特效。
使用 Canvas 以及日期对象等知识制作风景时钟效果
html5 canvas猫头鹰时钟代码是一款html5利用canvas绘制的时钟,猫头鹰的眼睛跟随秒钟转动,时钟可以放大和缩小。
用HTML5的Canvas制作的时钟显示效果,绘制了表盘,时针,分针,秒针以及数字时间的显示,对该文件有问题可以私聊
主要为大家详细介绍了JS+Canvas绘制动态时钟效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
练习资料存储
html5基于canvas画布绘制的圆形时钟效果源码.zip
绘制时钟Canvas需要的知识点,案例 绘制时钟Canvas,源代码。精美手表、时钟案例。
本文实例为大家分享了canvas封装动态时钟的具体代码...canvas绘制动态时钟</title> <style> #clock { display: block; margin: 30px auto; } </style> </head> <body> <canva