h5新特性：canvas标签

1.canvas标签：

描述：canvas为HTML5提供了基础，用来“替代”flash等其他动画或游戏的一个标签

说明：

1）尽量用行内样式设置属性

2）canvas是新标签，不是所有浏览器都支持，所以要在其内部添加文本，显示“您的浏览器不支持canvas”。

3）canvas可以认为是一张画布，其内部的所有内容都是通过js脚本添加的

4）使用：

在脚本中：

var huaban  = document.querySelector('.canvas');

var painter = huaban,getContext('2d');

在这里变量painter的官方名称叫上下文对象

canvas特性：

上屏即像素化

2.矩形绘制

1）填充矩形：

x:横坐标

y：纵坐标

w：宽度

h；高度

上下文对象（以下则直接称为pointer）.fill(x,y,w,h)

2)描边矩形

pointer.strokeRect(x,y,w,h)

3)擦除矩形

pointer.ClearRect(x,y,w,h)

3.路径绘制

1）设置笔触坐标：

pointer.moveTo(x,y)

2)设置笔触路径：

pointer.lineTo(x,y)

3）设置笔触颜色

pointer.strokeStyle=color

4)绘制笔触

pointer.stroke()

5)填充颜色：

pointer.fillStyle="color"

6)封闭图形填充

pointer.fill()

7)开启路径：

pointer.beginPath

8)结束路径

pointer.closePath

3.弧形绘制

1）设置圆弧轨迹

x:圆心横坐标

y:圆心纵坐标

r：半径

pointer.arc(x,y,r,结束弧度，开始弧度，true)

pointer.arc(x,y,r,开始弧度，结束弧度，false)

说明：

弧度参数写法：

（0~2）.Math.PI

默认false逆时针，true顺时针