<canvas>便签用于绘制图像，图表。不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本javascript来完成实际的绘图任务。既然你要画出你想要的图案，你给有画布啊，总不能在空气中画画啊，所以第一步你要创建一个画布，给画布一个宽高能装下你的画。<canvas width="500" height="500" id="canvas"></canvas>。

canvas开始标签和结束便签可以填充内容，填充的内容是后备信息，如果浏览器不支持canvas元素，就会显示这个后备信息。因为是js控制，所以在脚本语言获取这个元素。var canvas = document.getelementbyid('canvas');画布创建好了，要在这个画布上绘图，就须取得绘图上下文。而取得绘图上下文的对象引用，需调用getcontext（）方法并传入上下文的名字，传入‘2d’,就可以取得2d上下文对象。在使用canvas之前，首先要检测getcontext（）方法是否存在。这一步非常重要。

if（canvas.getcontext ){

　　var  context = canvas.getcontext("2d");

　　context . strokestyle = "red";

　　context . fillstyle = "blue"

　　......

}

使用2d绘图上下文提供的方法，可以简单绘制2d图形，比如矩形，弧线，和路径。2d上下文的坐标开始于canvas元素的左上角，原始坐标是（0,0）。所有坐标值都是基于这个原点计算。

填充和描边 ：填充就是用指定的样式（颜色渐变或图像）填充图形，描边，就是只在图形的边缘划线。填充和描边取决于两个属性fillstyle和strokestyle 这两个属值可以是字符串渐变对象，模式对象。

绘制矩形：方法包括fillrect(),strokerect() clearrect();这三个方法都接受4个参数，矩形x坐标，y坐标，矩形宽度，矩形高度。

var canvas = document.getelementbyid('canvas');
if (canvas.getcontext) {
　　var context = canvas.getcontext('2d');
　　context.fillstyle = 'red';               //绘制红色矩形
　　context.fillrect(100, 100, 100, 100);
　　context.fillstyle = 'rgba(0,0,255,0.5)'; //绘制半透明蓝色矩形
　　context.fillrect(150, 150, 100, 100);
}

clearrect()方法用于清除画布上的矩形区域，本质上，这个方法可以把绘制上下文中的某一矩形区域变透明。

canvas 线段样式

context.linecap='butt | round | square';

当两条线条交汇时，创建边角样式：

context.linejoin='miter | bevel | round';

HTML5☞canvas

斜街长度：内角与外角的距离，当linejoin是miter时，用于控制斜接部分的长度 miterlimit。如果斜街长度超过miterlimit的值，就会自动变成bevel 实际运算时大于limit * linewidth / 2的值。

绘制路径

绘制路径可以创造出复杂的形状和线条。要绘制路径，首先必须调用beginpath()方法，表示要开始绘制新路径。然后在调用下列方法绘制实际路径。

moveto(x,y) 将游标移动到（x,y）,不划线。

lineto(x,y) 从上一点开始绘制一条直线，到（x,y）

pen.linewidth=15;
pen.moveto(100,100);
pen.lineto(300,100);             //图片中最粗的那条线
pen.strokestyle = 'red';
pen.stroke();
 
pen.linewidth=5;                 //画笔由15改成5
pen.strokestyle = 'yellow';      //颜色变黄色
pen.lineto(200,200);　　　　　　　 //接着上面的点画。最末端点垂直坐高垂直于红色的那条
pen.moveto(300,100)　　　　　　　  //改变起点
pen.lineto(100,150);                        
pen.stroke();

pen.strokestyle = 'black';
 
pen.linewidth=1;
pen.lineto(50,150);
pen.lineto(50,450);
pen.stroke();

我们发现他们是一个路径的（就想是一个集合），也就是你改变笔的粗细和颜色会整体改变，但是因为画在上面的已经画上面的，并不会凭空消失。

那要怎么让他们不是同一个路径呢？用这个就可以了pen.beginpath(); 开始子路径一个新的集合就可以设置颜色和粗细了　。

pen.closepath()的作用是关闭路径，如果当前的图形不是封闭的，会封闭图形。pen.beginpath()和pen.closepath()不用同时存在。

canvas画弧

pen.arc(圆心坐标，圆心坐标，起始弧度，结束弧度，弧形方向)；

也就是说无论是顺时针画弧还是逆时针画弧，规定的pi的位置都是固定的。

pen.moveto(100,100);

pen.arc(100, 100, 30, math.pi * 0 , math.pi / 0.5, 0);此时的顺时针就是1/4圆，逆时针就是3/4圆。

注意起始弧度和结束弧度都是用pi的形式表示。 0顺时针 1逆时针

pen.closepath();

pen.stroke();

画出来

pen.aracto(x1,y1,x2,y2,r); 从上一点开始绘制一条弧线（圆角）

绘制的弧线与当前点的x1,y1连线，x1,y1和x2，y2连线相切

HTML5☞canvas

画一个圆角矩形

pen.moveto(120, 100);
pen.arcto(200, 100, 200, 200, 20);
pen.arcto(200, 200, 100, 200, 20);
pen.arcto(100, 200, 100, 100, 20);
pen.arcto(100, 100, 200, 100, 20);
pen.stroke();

canvas画贝塞尔曲线

pen.quadraticcurveto(x1, y1, ex, ey); 二次贝塞尔曲线

x1 y1 控制点 ex ey结束点

pen.moveto(100, 100);
pen.quadraticcurveto(200, 200, 300, 100);
pen.stroke();

pen.beziercurveto(x1, y1, x2, y2, ex, ey); 三次贝塞尔曲线

两个控制点一个结束点

pen.moveto(100, 100);
pen.beziercurveto(200, 50, 300, 200, 400, 50);
pen.stroke();

HTML5☞canvas

创建路径后，接下来有几种可能的选择，如果绘制一条连接到路径的起点线条，可以使用closepath();

如果路径以完成，你想用fillstyle填充他，可以调用fill（）方法。另外，还可以调用stroke（）方法对路径描边，最后还可以调用clip(),这个方法可以在路径上创建一个剪裁区域。

canvas 绘制文本

绘制文本主要有两个方法，filltext()和stroketext()，这两个方法都接收4个参数 filltext（“文本字符串” ，文字x坐标，y坐标，可选的最大像素），

filltext() 用 fillstyle（）属性绘制文本，stroketext() 用 strokestyle（）属性为文本描边

而且这两个方法都已下列3个属性为基础。

font（“文本样式大小字体”）
textalign=“ left ” | “ center ” | “ right | start | end ” 文本对齐方式
textbaseline=" " 可选值见下面，文本的基线

HTML5☞canvas

文字基线对齐方式 textbaseline

属性

HTML5☞canvas

由于绘制文本比较复杂，特别是需要把文本控制在某一区域中的时候，2d上下文提供了辅助确定文本大小的方法measuretext(),这个方法接收一个参数，及要绘制的文本。返回一个textmetrics对象，对象目前只有一个属性width属性。measuretext()利用font， textalign 和textbaseline的当前值计算指定的文本大小。

假设你想在一个140像素宽的矩形区域绘制文本，下面的代码从100像素的字体开始递减，最终会找到合适的字体大小。

var fontsize = 100;
context.font = fontsize + 'px arial';

while (context.measuretext("hellow world").width > 140) {
　　fontsize--;
　　context.font = fontsize + 'px arial';
}
context.fillrect(100, 100, 140, 140);
context.filltext("hellow world", 100, 100);
context.filltext("fontseizeis"+fontsize, 30, 30);

canvas坐标轴旋转（跟css3的转换差不多）

1.translate（dx,dy）位置重新映射画布上的（0,0）

pen.translate(100, 100);

pen.strokerect(0, 0, 100, 100);

2.scale(sx,sy) 缩放当前的绘图

3.rotate（math.pi）旋转当前的绘图

4.save（） restore ()

保存当前图像状态的一份拷贝（保存画布状态）压如栈中

从栈中弹出存储的图形状态并恢复

5.settransform( a , b , c , d , e , f )先重置，在变换

参数：水平缩放水平倾斜垂直倾斜垂直缩放水平移动垂直移动

transform（a,b,c,d,e,f）在之前的状态基础上变换

canvas 在水平和垂直方向重复图像：

1.createpattern（image，“repeat | repeat-x | repeat-y | no-repeat”）;

img元素（image对象），canvas元素，video元素（有图形的）

var img = new image();
img.src = "hat.png";      //异步加载图片所以用onload保证加载完成
img.onload = function(){
　　var bg = pen.createpattern(img, "repeat");
　　pen.fillstyle=bg;
　　pen.fillrect(0,0,100,100);
 
}