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绘图的大多数行为其实都可以分解成两种基础操作：填充和描边。填充就是用指定的样式（颜色，图片，渐变等）填充封闭图形，描边就是在图形的边缘画线。

填充和描边对应两个属性：

1. fillStyle
2. strokeStyle

这两个属性都可以是字符串，渐变对象或模式对象（图形等），默认值是”#000000″也就是黑色。如果只是指定颜色，可以使用任何CSS支持的颜色字符串。

设置线条的宽度用 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”
上边的这些属性都有默认值，没有必要每次使用都设置。

绘制文本主要有两个方法：

1. .fillText(string,x,y [,width])
   这个方法接收第一个参数是绘制的文本字符串，然后是坐标，最后一个是可选的最大宽度。这个方法用fillStyle属性绘制文本
2. .strokeText(string,x,y [,width])
   这个方法同上一个方法接收的参数相同，但是使用strokeStyle属性为文本描边。相对来说还是使用第一种方法比较多。

剩下的变换，绘制图像和阴影以及3D效果遇到再说。