canvas学习笔记

什么是Canvas

 canvas是HTML5提供放入一个用于展示绘图效果的标签。

基本用法

基本语法：

<canvas></canvas>

1、使用Canvas标签，即可在页面中开辟一格区域，可以设置其width和height设置该区域的尺寸。

2、默认宽高为300和150

3、如果浏览器不支持canvas标签，那么会将其解释为div标签。因此常常在canvas中嵌入文本，以提示用户浏览器的能力。

4、canvas的兼容性非常强，只要支持该标签的，基本功能都一样，因此不用考虑兼容性问题。

5、canvas本身不能绘图，是使用JavaScript来完成绘图。canvas对象提供了各种绘图用的api

6、不要使用css来设置狂爱，会有拉伸的问题，应该直接用属性设置

 基本绘图方法：

1、获得 canvas 对象

2、调用 getContext 方法，提供字符串参数 '2d'

3、该方法返回 CanvasRenderingContext2D 类型的对象，该对象提供基本的绘图命令，使用这些命令进行糊涂。

 方法与实例

moveTo

语法：

CanvasRenderingContext2D.moveTo( x, y )

描述：该方法用于设置绘制起点。其中参数 x,y 表示在坐标系中的位置。

lineTo

语法：

CanvasRenderingContext2D.lineTo( x, y )

描述：用于设置需要绘制直线的另一个点。最终描边后会连线当前点和方法参数描述的点。

stroke

语法：

CanvasRenderingContext2D.stroke()

描述：用于连线。将描述的所有点按照指定顺序连接起来。

例如：绘制基本线