HTML5的canvas标签

HTML5的canvas标签现在已经成为前端技术人员的心头好，因为使用canvas标签提供的API可以轻松实现动画功能，从红遍朋友圈的围住神经猫和现在各大企业的HTML5营销。

最近学习用html5制作了一个小游戏，试玩地址http://aries-sushi.github.io/learningjs.github.io/lessons/lesson6.html

今天就总结一下html5的一些基本用法，权做记录。

首先来看canvas标签，在w3school中的定义如下：

<canvas>

标签定义图形，比如图表和其他图像。

<canvas>

标签只是图形容器，您必须使用脚本来绘制图形。

是的，canvas标签只是一个图形容器真正要实现图形的绘制是需要通过js来完成的。

那首先作为一个html元素就有它支持的标签属性、标准属性和事件属性，其中标准属性和事件属性请分别查阅标准属性 &事件属性这里就只说一下标签属性，canvas有两个标签属性

width

和

height

，单位都是px（像素），但是在书写的时候并不需要书写单位。例如

<canvas width="600" height="600"></canvas>

用来规定画布的宽度和高度。你也可以在标签之间写入备注信息，这些信息在不支持canvas这个标签的浏览器中就可以被用户看到。

一些准备工作

1.取得画布容器

在这个容器中绘制图形之前呢要做一些准备工作，首先当然需要取得这个容器，就好比说我要在一块画板上作画，那么先得拿起这款画板。取得容器是用DOM的方法来操作例如

var can1 = getElementById（"canvas1"）

，这里假设你的canvas的id为canvas1.

2.取得上下文环境

取得这块画布之后就要布置好绘画环境，专业术语叫做取得2d上下文环境，代码为

var ctx1 = can1.getContext（'2d'）

，之后所有的操作都是基于这个2d上下文的。在2d上下文中坐标原点是（0，0）就是canvas画布的左上角，所有的坐标值都是基于这个原点计算的。

canvas API

准备工作都做好之后，就可以开始绘图辣。这里介绍一些2d上下文对象常用的方法和属性。

绘制路径

要绘制路径，首先必须调用beginPath（）的方法，表示要开始绘制新的路径了。一般和这个方法成对使用的是closePath（）方法，但是这个方法会让你绘制的路径闭合，所以如果你并不想绘制一条闭合的路径的话可以不适用这个方法。

由于在canvas中的绘制是一种基于状态的绘制，即在绘制图形之前准备好所有的状态，包括路径设计，绘制的样式的设计，之后进行绘制。所以需要在调用stroke（）方法绘制之前对绘制的各种状态/样式进行规定。那么有哪些属性来完成这些功能呢。

strokeStyle //用来规定绘制画笔的颜色

fillStyle //设置或返回用于填充绘画的颜色、渐变或模式

shadowColor //设置或返回用于阴影的颜色

shadowBlur //设置或返回用于阴影的模糊级别

shadowOffsetX //设置或返回阴影距形状的水平距离

shadowOffsetY //设置或返回阴影距形状的垂直距离

1.直线路径的绘制

绘制方法：

moveTo(x,y) //将绘制游标移动到（x,y）点，此时不画线

lineTo(x,y) //从起始点绘制一条直线到（x,y）点

stroke() //绘制前面设计好的路径

fill() // 填充当前绘图（路径）

绘制直线的时候可以用相关属性来规定绘制的直线的样式

lineCap //取值有butt round square设置或返回线条的结束端点样式

lineJoin //取值有bevel round miter 设置或返回两条线相交时，所创建的拐角类型

ineWidth //设置或返回当前的线条宽度

miterLimit //设置或返回最大斜接长度,斜接长度指的是在两条线交汇处内角和外角之间的距离

2.弧线的绘制

绘制方法：

arc（x,y,radius,startAngle,endAngle,counterclockwise） //绘制一个以（x,y）为中心，弧度半径为radius，起始结束角度和是否逆时针绘制的弧线，false为顺时针

arcTo(x1,y1,x2,y2,radius) //绘制一条从上一个点开始到（x2，y2）点结束并且以radius为半径的弧线，且弧线穿过（x1，y1）

bezierCurveTo(c1x,c1y,c2x,c2y,x,y) //绘制从商店开始到（x,y）点的一条弧线，并且以(c1x,c1y,c2x,c2y）为控制点。

还有其他更复杂的弧线绘制，参考canvas手册

3 矩形的绘制

绘制方法

rect(x,y width, height) //从(x, y)点开始绘制宽为width高为height的一个矩形

fillRect(x,y width, height) //绘制被填充的矩形形状

strokeRect(x,y width, height) //描边矩形形状

clearRect(x,y width, height) //清除矩形形状

4.文本绘制

绘制方法：

fillText(string，x, y, px（可选）) //在（x,y）的位置用fill（）方法绘制一个内容为string的文本

strokeText(string，x, y, px（可选）) //在（x,y）的位置用stroke（）方法绘制一个内容为string的文本

5 绘制图像

绘制图像之前必须有一个Imge对象，可以传入一个img元素也可以直接建一个

img =  new Image（）

绘制方法

drawImage（img，x, y，width(可选), height(可选)） //将img对象绘制到起点为（x,y）的位置，其中有两个可选的参数width和height来规定绘制图像对象的大小。

使用这个方法除了可以传入img元素或者一个Image对象之外还可以传入另外一个canvas元素来将另外一张画布绘制到当前的画布上。

由于canvas的绘制都是基于状态的绘制，所以对于设置的一些状态需要保存或者重新恢复呢需要用到以下两个方法：

save（） //保存当前状态，将当前的所有设置都保存到栈结构中，然后可以对上下文进行修改

restore（） // 在保存设置的栈结构中向前返回一级

好啦，到此就可以自己动手试试啦。