canvas可以用来制作照片集或者制作检点的动画，甚至可以进行实时视频处理和渲染，这里我就来介绍canvas的简单用法
一：canvas标签
canvas标签和img标签看起来十分相似,canvas只有两个可选的属性width(宽度)，height(高度)属性，没有src和alt相关属性，如果我们不给canvas标签何止width和heigth属性，则默认width为300px，height为150px，也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用css属性来设置canvas标签的宽高
如：
<canvas id="myCanvas" width="500" height="300"></canvas>canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成
1：canvas初始化
var canvas = document.getElementById("myCanvas");//知道canvas元素
var ctx=canvas.getContext("2d");//创建context对象 由于canvas并不是在所有的浏览器都是支持的，所有这里我们可以使用如下方法进行检查支持性
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
return '不支持canvas'
}
var ctx=canvas.getContext("2d");
//canvas相关代码 二：canvas的简单使用
1：绘制矩形
canvas提供了三种绘制矩形的方法
(1)：绘制一个填充的矩形
fillRect(x, y, width, height) (2)：绘制一个矩形的边框
strokeRect(x, y, width, height) (3)：清除指定的矩形区域，然后这块区域会变的完全透明
clearRect(x, y, widh, height) 参数说明：
x,y：表示矩形的左上角的坐标(xy轴)，相当于canvas的坐标原点
width,height：表示需要绘制的矩形的宽高
如：
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
return '不支持canvas'
}
var ctx=canvas.getContext("2d");
//canvas相关代码
//设置矩形的颜色
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
//绘制填充矩形
ctx.fillRect (20, 20, 180, 80);
//绘制矩形边框
ctx.strokeRect (10, 10, 200, 100);
//清除指定的矩形区域，然后这块区域会变的完全透明
ctx.clearRect(50, 50, 120, 20) 根据如上现象如下：
2：绘制路径
图形的基本元素就是路径，路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合
在canvas中绘制路径的步骤如下：
(1)创建路径起始点
(2)调用绘制方法去绘制路径
(3)把路径封闭
(4)一旦路径生成，通过描边或填充路径区域来渲染图形
在canvas中绘制路径需要使用到的方法有：
(1)新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
ctx.beginPath() (2)把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标
ctx.moveTo(x, y) (3)闭合路径，会绘制一条从当前点到起始点的直线
ctx.closePath() (4)通过线条来绘制图形轮廓
ctx.stroke() (5)填充路径内容区生成实心图形
ctx.fill() (6)绘制一条从当前点到指定(x,y)坐标的直线
ctx.lineTo(x,y) 绘制路径实例如下：
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
return '不支持canvas'
}
var ctx=canvas.getContext("2d");
//设置填充区域颜色
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(200, 50);
ctx.lineTo(200, 200);
//闭合路径并绘制一条到起点的路径
ctx.closePath();
//绘制路径
ctx.stroke();
//填充闭合区域
ctx.fill(); 根据如上现象如下：
3：绘制圆弧
在canvas中有两种方法绘制圆弧
(1):arc方法
ctx.arc(x, y, r, startAngle, endAngle, anticlockwise) 以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)
这里的startAngle，endAngle参数单位为弧度，弧度和度数之间的转换如下：
radians(弧度) =(Math.PI/180)\*degrees(角度) //角度转换成弧度及：180°转化为弧度则为Math.PI
实例如下：
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
return '不支持canvas'
}
var ctx=canvas.getContext("2d");
ctx.beginPath();
//绘制一个圆心坐标为(50, 50),半径为40,其实弧度为0(0°),终止弧度为2\*Math.PI(360°)的圆弧
ctx.arc(50, 50,40,0,2\*Math.PI);
ctx.stroke();
ctx.beginPath();
//绘制一个圆心坐标为(150, 50),半径为40,其实弧度为0(0°),终止弧度为Math.PI(180°)的圆弧，逆时针进行绘制
ctx.arc(150, 50,40,0,Math.PI, true);
ctx.stroke();
ctx.beginPath();
//绘制一个圆心坐标为(50, 150),半径为40,其实弧度为-Math.PI / 2(-90°),终止弧度为Math.PI / 2(90°)的圆弧，顺时针进行绘制，并进行内容填充
ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false);
ctx.fill();
ctx.beginPath();
//绘制一个圆心坐标为(150, 150),半径为40,其实弧度为0(0°),终止弧度为Math.PI(180°)的圆弧，顺时针进行绘制，并将起始点和终止点连接
ctx.arc(150, 150, 40, 0, Math.PI, false);
ctx.closePath();
ctx.stroke(); 根据如上现象如下：
(2):arcTo方法
ctx.arcTo(x1, y1, x2, y2, radius) 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点
实例如下：
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
return '不支持canvas'
}
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
//参数1、2：控制点1坐标 参数3、4：控制点2坐标 参数4：圆弧半径
ctx.arcTo(200, 50, 200, 200, 100);
ctx.lineTo(200, 200)
ctx.stroke();
//绘制矩形
ctx.beginPath();
ctx.rect(50, 50, 10, 10);
ctx.rect(200, 50, 10, 10)
ctx.rect(200, 200, 10, 10)
ctx.fill() 根据如上现象如下：
arcTo方法的说明：
arcTo这个方法可以这样理解。绘制的弧形是由两条切线所决定。第 1 条切线：起始点和控制点1决定的直线。第 2 条切线：控制点1 和控制点2决定的直线。其实绘制的圆弧就是与这两条直线相切的圆弧
4：给canvas图形添加样式和颜色
(1)添加颜色
在canvas中使用fillStyle和strokeStyle方法给canvas图形添加颜色
ctx.fillStyle = color //设置图形的填充颜色
ctx.rokeStyle = color //设置图形轮廓的颜色如：
[1]使用fillStyle方法设置图形的填充颜色
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
return '不支持canvas'
}
var ctx=canvas.getContext("2d");
ctx.fillStyle = "rgba(0, 0, 200, 0.7)";
ctx.fillRect (20, 20, 180, 80); 根据如上现象如下：
[2]使用strokeStyle给图形轮廓添加颜色
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
return '不支持canvas'
}
var ctx=canvas.getContext("2d");
ctx.strokeStyle = "rgba(0, 0, 200, 0.7)";
ctx.strokeRect (20, 20, 180, 80); 根据如上现象如下：
(2)设置线宽
在canvas中使用lineWidth给线段设置宽度
如：
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
return '不支持canvas'
}
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
//设置线颜色
ctx.strokeStyle = '#f00';
//设置线宽
ctx.lineWidth = 10;
ctx.stroke(); 根据如上现象如下：
(3)设置线条末端样式
在canvas中使用lineCap设置线条的末端样式,lineCap一共有三个参数值，分别为：
butt：线段末端以方形结束
round：线段末端以圆形结束
square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域
实例如：
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
return '不支持canvas'
}
var ctx=canvas.getContext("2d");
//设置线颜色
ctx.strokeStyle = 'rgba(0, 0, 200, 0.5)';
//设置线宽
ctx.lineWidth = 20;
ctx.beginPath();
ctx.moveTo(10, 50);
ctx.lineTo(10, 200);
//设置线条末端样式
ctx.lineCap = 'butt'
ctx.stroke();
ctx.beginPath();
ctx.moveTo(60, 50);
ctx.lineTo(60, 200);
//设置线条末端样式
ctx.lineCap = 'round'
ctx.stroke();
ctx.beginPath();
ctx.moveTo(110, 50);
ctx.lineTo(110, 200);
//设置线条末端样式
ctx.lineCap = 'square'
ctx.stroke(); 根据如上现象如下：
(4)设置线条结合处的样式
在canvas中使用lineJoin来设置线条与线条间接合处的样式，lineJoin一共有三个参数，分别为：
round：通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
bevel：在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
miter：(默认) 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。
实例如：
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
return '不支持canvas'
}
var ctx=canvas.getContext("2d");
//设置线颜色
ctx.strokeStyle = 'rgba(0, 0, 200, 0.5)';
//设置线宽
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(10, 50);
ctx.lineTo(50, 100);
ctx.lineTo(80, 50);
//设置线条末端样式
ctx.lineJoin = 'round'
ctx.stroke();
ctx.beginPath();
ctx.moveTo(10, 100);
ctx.lineTo(50, 150);
ctx.lineTo(80, 100);
//设置线条末端样式
ctx.lineJoin = 'bevel'
ctx.stroke();
ctx.beginPath();
ctx.moveTo(10, 150);
ctx.lineTo(50, 200);
ctx.lineTo(80, 150);
//设置线条末端样式
ctx.lineJoin = 'miter'
ctx.stroke();
根据如上现象如下：
5:绘制虚线
在canvas中使用setLineDash方法和lineDashOffset属性来制定虚线样式。 setLineDash 方法接受一个数组，来指定线段与间隙的交替；lineDashOffset属性设置起始偏移量
如：
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
return '不支持canvas'
}
var ctx=canvas.getContext("2d")
ctx.setLineDash(\[20, 5\]); // \[实线长度, 间隙长度\]
ctx.lineDashOffset = -0;//设置偏移量
//设置虚线
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(10, 100);
ctx.stroke();
//设置虚心矩形边框
ctx.strokeRect (20, 10, 200, 100); 现象如下：
6：绘制文本
在canvas中使用fillText和strokeText方法来渲染文本信息
fillText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。
strokeText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。
如：
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
return '不支持canvas'
}
var ctx=canvas.getContext("2d")
//设置文本边框颜色
ctx.strokeStyle = '#f00'
//设置文本填充颜色
ctx.fillStyle = '#f00'
//设置文本样式
ctx.font = "100px sans-serif"
//设置文本信息
ctx.fillText("文本信息", 10, 100);
ctx.strokeText("文本信息", 10, 200) 现象如下：
设置文本信息，我们还可以使用如下属性去设置文本信息的样式
textAlign = value 文本对齐选项。 可选的值包括：start, end, left, right or center。 默认值是 start。
textBaseline = value 基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。。
direction = value 文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
以上就是canvas的一些基本用法
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。