Canvas

Canvas是一个可以使用脚本(通常是JavaScript )来绘制图形的HTML元素， <canvas> 元素的基本语法结构是：

<canvas width="宽度" height="高度" id="ID">
</canvas>

canvas的属性：

（1）width：　　

//获取宽度
variable = HTMLCanvasElement.width
//设置宽度
HTMLCanvasElement.width = number value

 （2）height：

//获取高度
variable = HTMLCanvasElement.height

//设置高度
HTMLCanvasElement.height = number value

 canvas的方法：

（1）getContext()

getContext()方法用于返回 canvas 的上下文，如果上下文没有定义，则返回null，其语法结构是：

variable = HTMLCanvasElement.getContext(contextType)

上下文的取值有：

1. '2d'，此时将建立一个 CanvasRenderingContext2D 二维渲染上下文对象
2. 'webgl'，此时将建立一个 WebGLRenderinContext 三维渲染上下文对象

 ① CannvasRenderingContext2D：

　　CanvasRenderingContext2D对象提供了2D渲染背景用来绘制 Canvas 元素，为了获取这个对象，需要在canvas 对象上调用getContext() 方法，并且提供"2d"参数：

//1.获取Canvas元素(画布)
var canvasEle = document.getElementById('canvas');

//2.获取CanvasRenderingContext2D对象(工具箱) 
var ctx = canvasEle.getContext('2d');

CannvasRenderingContext2D的方法：

1.绘制矩形：

　　　　① strokeRect()方法：strokeRect()方法用于绘制矩形框，其语法结构是

CanvasRenderingContext2D.strokeRect(x,y,width,height)

　　　　② clearRect()方法：用于擦除指定区域所绘制的内容

CanvasRenderingContext2D.clearRect(x,y,width,height)

　　　　③ fillRect()方法：用于绘制填充矩形

CanvasRenderingContext2D.fillRect(x,y,width,height)

2.描边和填充：

（1）stroke属性：用于设置描边颜色，默认值#000

CanvasRenderingContext2D.strokeStyle = string color

颜色的表示方法有：

　　英文名称

　　十六位进制代码，如#f00、#89af56 RGB模式，如rgb(255,0,0)

　　RGBA模式，如rgba(255,0,0,0.7)

(2) fillStyle属性：用于设置填充颜色：

CanvasRenderingContext2D.fillStyle = string color

3.文本的描边与填充：

（1）fillText方法：用于绘制填充文本

canvasRenderingContext2D.fillText(text,x,y)

（2）strokeText()方法：用于绘制描述文本：

canvasRenderingContext2D.strokeText(text,x,y)

（3）font属性：用于设置文本样式：

canvasRenderingContext2D.font = "字号 字体"

默认字号为10像素；默认字体 sans-serif

文本样式与CSS font规范相同

（4）textAlign属性：用于设置文本的对齐方式：

canvasRenderingContext2D.textAlign = 'left|center|right'

（5）measureText()方法：获取文本对象

MeasureText canvasRenderingContext2D.measureText(‘内容’)

//该对象存在width属性，用于获取文本对象的宽度
int MeasureText.width

window对象

1 requestAnimationFrame()方法：

　　window.requestAnimationFrame()方法是浏览器用于定时循环操作的一个方法，类似于setTimeout() 方法，主要用途是按帧对于网页进行重绘。其目是为了让各种网页动动效果（DOM动画、Canvas动画等）能够有统一的刷新机制，从而节省系统资源。requestAnimationFrame()的优势是     充分利用显示器的刷新机制，所以动画就不再会出现卡顿的现象了。一旦页面不处于浏览器的当前标     签，就会自动停止刷新。其语法结构是：

timerId = window.requestAnimationFrame(animation);

2 cancelAnimationFrame()方法：

　　cancelAnimationFrame()方法用于取消一个先前通过调用window.requestAnimationFrame()方法中生成ID，其语法结构是：

window.cancelAnimationFrame(requestId)

浏览器兼容问题：

cancelAnimationFrame = window.cancelAnimationFrame ||
window.mozCancelAnimationFrame();