一、canvas的基础知识点

1、  canvas是网页在使用时的一块区域，默认的大小是150*300（像素），默认的坐标（0，0），可以自己设置其大小或者其他特性。@H_450_11@

2、<canvas></canvas>是网页上的基本元素。可以通过JavaScript来控制其内容的增减。@H_450_11@

3、 canvas在标题处不建议使用。标题处建议使用<H1>等。@H_450_11@

4、canvas可以替代一些文本或图片，当网页不支持时canvas，内容可以显示。如：@H_450_11@

<canvas>@H_450_11@

可替代的内容。@H_450_11@

</canvas>@H_450_11@

5、canvas元素可以通过css样式来设置其样式，如添加边框，设置字体颜色等。（css样式适用于canvas元素，同其他元素使用方法相同）。@H_450_11@

      设置canvas字体时，其内部的字体默认为canvas的样式，设置context的属性是同样要遵从css语法。@H_450_11@

二、canvas的基础使用

@H_450_11@

1、检查浏览器是否支持HTML5@H_450_11@

创建一个canvas对象，并获取上下文。如果发生错误则该浏览器不支持HTMl5。@H_450_11@

try{@H_450_11@

document.createElement("canvas").getContext("2d");@H_450_11@

document.getElementById("support").innerHTML = "HTML5  Canvas is supported in your brower";    @H_450_11@

　　//在页面放入ID为“support”的元素

}catch( e ){@H_450_11@

document.getElementById("support").innerHTML = "HTML5  Canvas is not supported in your brower";
@H_450_11@

}@H_450_11@

@H_450_11@

2、页面中加入canvas@H_450_11@

<canvas  heigth="200"  width="300"></canvas>  创建一块200*300的隐藏区域@H_450_11@

<canvas  id = "support" style ="border: 2px solid;"   heigth="200"  width="300"></canvas>  创建一块200*300的边框为2像素的区域，ID是用来快速查找该元素。@H_450_11@