最近看了一些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:本人在网页这一块也是新手一枚,算小白一个,可能很多地方写的也不全面。也可能说法有错误,很多地方知道要那么用,但是具体为什么要那么用 还是没怎么搞懂,引用电路实验老师的一句话就是“原理没搞懂”,慢慢来,一点一点进步咯,抱拳!