Canvas元素基本用法
HTML5里引入的最受欢迎的功能大概就是canvas元素了，这个元素在页面中指定一个区域，然和可以通过JS动态的在这个区域里边画图，单用canvas元素和JS甚至可以做出交互式的游戏。 canvas的所有功能由几组API构成，还有一个WebGL的3D上下文。开始绘画之前......
canvas元素需要设置的基础属性包括height和width，对应的DOM对象也有height和width属性。在没有绘图之前，是看不到这个元素的。 要进行绘图，就需要先取得绘图上下文，调用.getContext()方法并传入参数"2d"就可以拿到绘图上下文，是一个CanvasRenderingContext2D对象。
对于canvas元素还可以随时将画的画取出来，用.toDateURL(MIME)方法，返回的结果适合任何图像的src属性。
2D绘图
2D绘图的大多数行为其实都可以分解成两种基础操作：填充和描边。填充就是用指定的样式（颜色，图片，渐变等）填充封闭图形，描边就是在图形的边缘画线。 填充和描边对应两个属性：fillStylestrokeStyle
lineWidth属性控制，值可以是任意整数。
设置线条末端形状用 lineCap属性控制，值可以是"butt","round","square"。
设置线条相交的方式可以用 lineJoin属性控制，值可以是"round","bevel","miter"。
一旦设置了这几个属性，直到再次设置之前，填充和描边都会采用这几个属性。好了，下边开始画点什么东西吧。
绘制矩形
| 方法 | 说明 |
|---|---|
| .fillRect(x, y, width, height) | 在坐标(x,y)处绘制宽和高的矩形，并且用fillStyle属性填充颜色 |
| .strokeRect(x,y,width,height) | 画一个矩形，不填充，用 strokeStyle属性描边 |
| .clearRect(x,y,width,height) | 在指定的坐标清理掉一个矩形的范围。 |
绘制路径
| 方法 | 说明 |
|---|---|
| .beginPath() | 开始绘制路径之前先调用一次，表示开始绘制了 |
| .arc(x, y, radius, startAngle, endAngle, counterclockwise) | 在坐标(x,y)绘制一条弧线，半径是radius，开始弧度和结束弧度，最后一个参数是布尔值表示是否按逆时针。 |
| .arcTo(x1, y1, x2,y2,radius) | 从上一点画一条弧线到(x2,y2)，然后以给定的半径穿过(x1,y1) |
| .bezierCurveTo(c1x, c1y, c2x, c2y, x, y) | 从上一点开始绘制曲线，到(x,y)为止，以前四个参数的两个点作为控制点 |
| .lineTo(x,y) | 从上一点画一条直线到(x,y) |
| .moveTo(x,y) | 将绘图游标移动到(x,y)，不画线。 |
| .quadraticCurveTo(cx,cy,x,y) | 从上一点开始绘制一条二次曲线，以(cx,cy)为控制点，到(x,y)为止 |
| .rect(x, y, width, height) | 从x,y开始绘制一个矩形路径。 |
| .fill() | 用fillstyle属性填充路径 |
| .stroke() | 描边 |
| .clip() | 创建一个剪切区域，就是不带边框的区域。 |
| .closePath() | 画一条通往起点的线条 |
| .isPointInPath(x,y) | 判断这个坐标是否处于路径上 |
.beginPath()开始，一系列的语句会控制着当前的点开始进行创建路径，创建的过程中是不可见的。只有最后调用.fill()或者.stroke()或.clip()才会反应到画布上。通过路径可以画出很复杂的图案。其实有点类似于Python的turtle库，但是比turtle库高级了很多。
绘制文本
和绘制路径一样，绘制文本有三个基础属性可以设置：| 属性 | 说明 |
|---|---|
| font | 表示文本样式，大小和字体，用CSS字体格式字符串来规定，比如"10px Arial" |
| textAlign | 表示文本对齐方式，可以设置为"start", "end","left","right","center" |
| textBaseline | 表示文本的基线，可以设置为"top","hanging","middle","alphabetic","ideographic","bottom" |
| 上边的这些属性都有默认值，没有必要每次使用都设置。 | |
.fillText(string,x,y [,width])这个方法接收第一个参数是绘制的文本字符串，然后是坐标，最后一个是可选的最大宽度。这个方法用fillStyle属性绘制文本.strokeText(string,x,y [,width])这个方法同上一个方法接收的参数相同，但是使用strokeStyle属性为文本描边。相对来说还是使用第一种方法比较多。