context.font=; context.textAlign = ;//"start" "end" "left" "right" context.textBaseline = ;//"top" "bottom" "hanging" "alphabetic" "ideographic" context.fillText(,100,20);

有时候，我们需要将我们的文本控制在某一个区域中的时候，那么会用到measureText()方法，传入一个参数（我们需要显示的字符串），得到的对象里面有个width属性，返回最佳的width，假如说我们现在想在width=150px的画布上显示合适的字体的话，可以这样

1 var font_size = 40px; (context.measureText()>600px){ 4 font_size--; } ,10,10);

绘制变换，即是如css3中transform变换，创建绘制上下文时，会以默认值初始化变换矩阵，在默认的变换矩阵中下，所有处理是直接绘制。有如下这些变化：

rotate(angle);//angle是弧度

scale(x1,y1);//放大缩小，在x方向乘以x1，在y方向乘以y1

translate(x,y);//将坐标原点移动到(x,y)，好了(x,y)它就变成原点了

transform(m1_1,m1_2,m2_1,m2_2,dx,dy);//直接改变矩阵

setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy);//设置矩阵，对于矩阵详解：矩阵/

排列方式：，其对应的排列方式是这样的，与transform: matrix(a,b,c,d,e,f);还是不一样滴！

绘制图像，把一副图像绘制到画布上，，可以使用drawImage()方法，可以这样

context.drawImge(image,x,y,width,height,rx,ry,rwidth,rheight);//各个参数分别是：image图像对象，源图像的x坐标、源图像的y坐标，源图像的宽度，源图像的高度，目标图像的x坐标，目标图像的y坐标，目标图像的宽度，目标图像的高度，一般只需要前五个参数，就可以画出一个图像出来了！

 阴影，有以下这几个属性:

); context.shadowColor = ;//阴影颜色 context.shadowOffsetX = 5;//阴影x的偏移量 context.shadowOffsetX = 5;//阴影y的偏移量 context.shadowBlur = 4;//阴影的模糊距离

 渐变，分为线性渐变和径祥渐变，分别是createLinearGradient()和createRadialGradient()，使用如下：

gradient.addColorStop(); gradient.addColorStop();context.fillStyle= gradient; 8 9 conetxt.fillRect(30,30,40,40); gradient = context.createRadialGradient(gradient.addColorStop(); gradient.addColorStop();context.fillStyle= gradient; 20 21 conetxt.fillRect(30,30,40,40);

 模式，意思就是重复的图像来填充画布了，也可以叫做纹理填充，一般使用的方法createPattern，使用如下：

1 var image = document.images[0]; pattern= context.createPattern(image,);context.fillStyle = pattern; 6 7 conetext.fillRect(10,10,150,150);

对于canvas绘图的基础就差不多怎么多了，以后还需努力学习，将其用在实际项目上，而对于webGL这种3d上下文就暂时不去学习，这几天看得晕晕的，感觉目前对自己也没什么用处！