呃。。
今天开始看一下HTML5的一些东西了。
准备工作:
1、一个支持HTML5的浏览器(我用的Opera11.52和IE9),当然,火狐的和Chrome的近几个版本都能很好地支持HTML5
2、一个HTML的手册(说明书),以方便查阅。
因为发现目前用得比较多的是canvas,所以直接看了传说中很牛x的canvas标签的大概使用!
1、HTML中的canvas标签用于画图。。。貌似有点废话,canvas不就是个画布么 。
2、canvas标签中画图是由js控制,其中包含HTML5新添加的几个js函数。
要画图,第一步是要取得画图的上下文环境——context,所以呢要用到这样一个函数
getContext(contextId)
在我目前所看到的资料中,contextId的值为 ‘2d‘,好像在哪里看到HTML5目前还不支持 ‘3d’,具体的也记不清楚了。
此函数返回一个canvas的context。
具体获取方法为:
var context = document.getElementById(‘canvasId‘).getContext(‘2d‘)
突然想到 ,canvas也和以前的html元素一样,可以使用css控制( 这是真正的废话啊)。
在获取到了context后,就可以开始画图了,是吧!
要开始画图,需要先调用一个函数 beginPath()
具体使用如下:
context.beginPath();
当然,有beginPath()就得有endPath()。。。。。不过这次错了,这次却是closePath(),我觉得可以理解成为闭合路径,也就是完成画图 作了。
context有几个设置属性
1、设置画图时线的粗细 lineWidth 使用方法为 context.lineWidth = 3; //3即为线的粗细的值,数值越大线越粗,默认值为1
2、设置画图时线的颜色 strokeStyle 使用方法为 context.strokeStyle = "rgb(255, 0, 0)";
3、设置填充颜色 fillStyle 使用方法为context.fillStyle = "red" ; 设置方法和上面那个一样的咯。。
正式开始画咯
当然,我还只学了两种图形
1、矩形(Rectangle),画法:
context.rect(left, top, width, height) //这个画法好像不会去实现前面设置的属性,如颜色什么的
context.strokeRect(left, top, width, height) //这个画法会去实现前面设置的属性
2、圆(Circle)【说是圆。为啥我的画出来,是椭圆了?】,画法:
context.arc(120, 120,50,0,Math.PI, true); //120,120这两个值是设置圆心的位置的;50是半径;0是这里的参数是代表的什么属性还不清楚,没看文档,只知道当为0的时候只有半个圆,这应该是决定圆要画多少出来的吧^_^;Math.PI,这个都懂的;参数true表示画圆的上面的部分,false表示画圆的下面的部分,当然,这里的上面部分和下面部分是和前面的参数0有关的,随着0的变化,画出的结果也不一样的了。
画好了,然后是两个填充(可能有点不准确哈)函数:
1、context.stroke(); //这个函数在调用context.closePath()后执行(为什么要在后面执行?我也不知道,手册上那么写的,其它的情况还没有测试过) ,执行的结果是填充所画图形的边框(Border)
2、context.fill(); //这个函数。。。唉 ,不想重复打那些字,跳过好了。执行结果是填充(真正的是填充哦)所画图形的内部区域
当然了,要是想画个图形,又有边框又要填充效果,那么就调用context.stroke()和context.fill()两个函数了。
附上今天的代码:
<!doctype html> <html> <head> <title>HTML5 Exercise Page</title> <script type="text/javascript"> function getContext(id) { return document.getElementById(id).getContext(‘2d‘); } function init() { var ctx1 = getContext("cvs1"); var ctx2 = getContext("cvs2"); ctx1.beginPath(); ctx1.lineWidth = 3; ctx1.strokeStyle = "#3333AA"; ctx1.strokeRect(100, 10, 200, 300); ctx1.fill(); ctx1.closePath(0); ctx2.beginPath(); // ctx2.lineWidth = 3; // ctx2.strokeStyle = "rgb(87,65,144)"; ctx2.fillStyle="red"; ctx2.arc(120, 120,50,100,Math.PI, true); //参数true表示画上半部分,false表示画下半部分 // ctx2.arc(100, 100,50,0,Math.PI, false); ctx2.closePath(); ctx2.stroke(); //这种填充方式只画边框 ctx2.fill(); //这种填充方式会填充内部区域为默认(指定颜色) } </script> <style type="text/css"> canvas{ border:#660033 solid 2px; width:400px; height:400px; } </style> </head> <body onLoad="init();"> <canvas id="cvs1">Browser does not support HTML5 element canvas!</canvas> <canvas id="cvs2">Browser does not support HTML5 element canvas!</canvas> </body> </html>