HTML5最少欢迎的一个新功能就是canvas元素，这个元素负责在页面中设定一个区域，然后就可以使用javascript进行动态的绘图。
- 基本用法
<canvas id="drawing" widht="200" height="300"> a drawing of somethind </canvas>
设定了画布后，要去的绘图上下文,通过get.Context("2d")方法
var drawing = document.getElementById("drawing");
if(drawing.getContext){
var context = drawing.getContext("2d");
}
使用toDataURL(),参数为图像的MIME类型格式，如toDataURL("image/png")
var drawing = document.getElementById("drawing");
if(drawing.getContext){
var context = drawing.getContext("2d");
var imgURI = context.toDataURL("image/png");
var image = document.createElement("img");
image.src = img;
documemt.body.appendChild(image);
}
- 2D上下文
2D上下文的坐标开始与canvas元素的左上角。使用2D上下文可以绘制矩形、弧形和路径。2D上下文两个基本操作就是填充和描边，属性fillStyle()实现填充效果，属性strokeStyle()实现描边效果，这两个方法的参数为表示颜色的字符串、渐变对象、模式对象。
1）绘制矩形
对于绘制矩形有三种方法：fillRect() , strokeRect() , clearRect()。这三个方法都接受四个参数，x坐标，y坐标，width,height。
fillRect()的填充颜色由filleStyle()方法指定，同理stokeRect()由strokeStyle()指定。
描边线条的宽度有lineWidth()指定，lineCap指定线条末端是平头(butt)、圆头(round)还是方头(square),lineJoin()控制线条相交的方式(圆交round,斜交bevel,斜接miter)
clearRect()用于清理画布上得指定区域。
context.fillRect(10,10,50,50);
context.fillStyle("red");
context.stokeRect(20,20,50,50);
context.strokeStyle("green");
context.lineWidth(5);
context.lineCap(‘round‘);
context.lineJoin("round");
2) 绘制路径
绘制路径首先调用beginPath()，表示要绘制新的路径。然后调用下面的方法绘制实际的路径。
1）绘制弧线 arc(x,y,radius,staryAngle,endAngle,counterClockWise) --- 以（x,y）为圆心，半径为radius，开始角度为startangle,结束角度为endangle，counterClockWise值为false表示按顺时针计算。
2）从上一点开始绘制弧线 arcTo(x1,y1,x2,y2,radius)，以x2,y2为终点，通过x1,y1
3) 从上一个点绘制曲线 bezierCurveTo(c1x,c1y,c2x,c2y,x,y) ，从上一点开始绘制曲线，终点为x,y，以（c1x,c1y）（ c2x,c2y）为控制点
4）从上一点开始绘制一条直线 lineTo(x,y)
5) moveTo(x,y) 绘制图表移动到x,y点
6) quadraticCurveTo(cx,cy,x,y) 绘制二次曲线，终点为x,y，cx,cy为控制点
7）rect(x,y,widht,height) 绘制矩形路径
创建路径后，调用closePath()绘制连接到起点的路径，调用fill()填充路径，调用stroke()创建描边路径。
以下代码绘制了时钟：
//外圆 context.arc(100,100,99,0,2*Math.PI,false); //内圆 context.arc(100,100,94,0,2*Math.PI,false); context.moveTo(100,100); context.lineTo(100,15); context.moveTo(100,100); context.lineTo(100,30); //描边路径 context.storke();
3）绘制文本
绘制文本主要由两个方法：fillText(),stokeText(),接收四个参数：文本字符串，x坐标，y坐标，可选的最大宽度。
这两个方法以下面的属性为基础：font, textAlign ， textBaseline
textAlign的值有start end center，控制水平对齐方式 , textBaseline的值有middle,top,bottom，控制垂直对齐方式。
辅助测量文本所占的宽度方法meatureText(文本字符串),返回的对象只有一个width属性，这个方法是以设置的font,textAlign,textBaseline属性来测量文本可宽度。
var fontsize = 140px;
context.font = fontsize + " italic Arial";
context.textAlig = center;
context.textBaseline = "top";
while(context.meatureText("hello").width > 140){
fontsize -- ;
context.font = fontsize + " italic Arial";
}
context.fillStyle("red");
context.fillText("hello",10,10);
4)变换
修改变化矩阵的方法：
rotate(angle):围绕原点旋转angle角
scale(scaleX,scaleY) : 缩放图像，在x方向乘以scaleX,在y方向乘以scaleY
translate(x,y) : 将坐标原点移动到（x,y）点
transform(m1_1,m2_1,m2_1,m2_2,dx,dy) : 直接修改变换矩阵
setTransforn(m1_1,m2_1,m2_1,m2_2,dx,dy) : 将变换矩阵重置为默认状态，在调用transform方法
通过context.save()可以将设置保存下来，再通过context.restore（），从当前设置一级一级向上得到之前的设置
5）绘制图像
通过方法drawImage()绘制图像，不同的实现效果这个方法需要传入的参数不同。
最简单的参数是，html的image元素，绘制区域起点x坐标，y坐标
var img = document.images[0]; context.drawImage(img,10,10);
绘制图像的一部分到画布中：
参数为：image元素，源图像的坐标起点x值，y值，width,height,目标图像的x值，y值，width,height.
将一个canvas元素绘制到另一个画布中
6）阴影
shadowColor = 颜色值
shadowOffsetX = X方向的偏移量
shadowOffsetY = Y方向的偏移量
shadowBlur = 模糊值
7）渐变
- 线性渐变
调用createLinearGradient(起点x坐标，起点y坐标，终点的x坐标，终点的y坐标)，返回canvasGradient渐变对象。创建渐变对象后调用addColorStop(色标的位置，css颜色值),色标的位置从0到1，0代表开始的颜色，1代表结束的颜色，把这个方法返回的渐变对象赋给fillStyle或者storkeStyle(),就可以使用渐变来绘制形状或者描边。
var gradient = context.createLinearGradient(30,30,70,70); gradient.addColorStop(0,‘‘white"); gradient.addColorStop(1,"blue") context.fillStyle = gradient; context.fillRect(30,30,40,40);
- 径向渐变
方法类似线性渐变，context.createRadialGradient(起点圆的x坐标，y左边，半径，终点圆的x坐标，y坐标，半径)
8）使用模式
模式其实是重复的图像，调用方法createPattern(image元素，css的background-repeat值)，将返回对象赋给fillstyle()
var img = document.images[0]; var pattern = context.createPattern(img,"repeat"); context.fillStyle = pattern; context.fillRect(30,30,100,100);
createPattern的第一个参数也可以是video对象或者canvas对象
9）获得图像数据
调用方法getImageData(获得的图像区域的x坐标，y坐标，width,height) ， 返回imageData对象，这个对象有三个属性：width,height，data . 其中data属性存储这图像中每一个像素的值，每个像素又保存着rgba四个元素值。
var data = context.getImageData(0,0,image.width,image.height);
red = data[0]
gree = data[1]
blue = data[2]
alpha = data[3]
10) 合成
两个属性：globalAlpha = 0到1之间的值 ， globalCompositionOperation = 指定的字符串值。
globalAlpha设置所有绘制区域的透明度
globalCompositionOperation指定先绘制的图形与后绘制的图形如何重叠。
原文地址：https://www.cnblogs.com/lingLongBaby/p/8608946.html