标签：
呃。。
今天开始看一下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>
标签：
原文地址：http://www.cnblogs.com/androidshouce/p/5702290.html
