Canvas个人整理（详细）

一、Canvas的基本使用：

html中写入标签

<canvas id="myCanvas" width="200" height="100"></canvas>

canvas绘画基本都是在js里绘制，所以除了上面html标签，接下来的操作都是在js完成

/*获取元素*/
   var myCanvas = document.querySelector('#myCanvas');
   /*获取绘图工具*/
   var context = myCanvas.getContext('2d');
   /*设置绘图的起始位置*/
   context.moveTo(100,100);
   /*绘制路径*/
   context.lineTo(200,200);
   /*描边*/
   context.stroke();

路径绘制相关方法：

1. stroke() 描边，通过线条来绘制图形轮廓
2. fill() 填充，通过填充路径的内容区域生成实心的图形
3. beginPath()新建一条路径
4. closePath()自动闭合路径
5. moveTo(x, y)将笔触移动到指定的坐标 x 以及 y 上
6. lineTo(x, y)绘制一条从当前位置到指定 x 以及 y 位置的直线。

样式设置：

1. lineWidth 线宽，默认1px
2. lineCap 线末端类型：(butt默认)、round、square
3. lineJoin 相交线的拐点 miter(默认)、round、bevel
4. strokeStyle 线的颜色
5. fillStyle 填充颜色
6. setLineDash() 设置虚线
7. getLineDash() 获取虚线宽度集合
8. lineDashOffset 设置虚线偏移量（负值向右偏移）

二、图形绘制：

1、矩形绘制

有四种不同矩形绘制方法

1. context.rect(x,y,w,h) 没有独立路径
2. context.strokeRect(x,y,w,h) 有独立路径，不影响别的绘制
3. context.fillRect(x,y,w,h) 有独立路径，不影响别的绘制
4. context.clearRect(x,y,w,h) 擦除矩形区域

x 为横坐标，y 为纵坐标 ，w 为矩形宽度，h为矩形高度

2、圆弧绘制

context.arc(
	x, //圆心横坐标
	y, //圆心纵坐标
	r, //半径
	startAngle, //开始角度
	endAngle, //结束角度
	anticlockwise //是否逆时针方向绘制（默认false表示顺时针；true表示逆时针）
)

注意：

• 圆弧路径绘制完成后不要忘了使用 stroke() 描边或 fill() 填充，否则看不到效果
• 如果canvas画布的宽高是用css设置，会导致图形变形

三、文本绘制：

context.font = '微软雅黑' //设置字体
//context.strokeText()
context.fillText(text,x,y,maxWidth)

text 为要绘制的文本
x,y 为文本绘制的坐标（文本左下角）
maxWidth 为设置文本最大宽度，可选参数

属性设置：

1. context.font字体，默认的字体是10px sans-serif
2. context.textAlign文本水平对齐方式，相对绘制坐标来说的，可选值有：
   left 、center 、 rightstart （默认） 、 end
3. context.direction文字方向，可选值有：
   rtl 、 ltr
4. context.textBaseline设置基线（垂直对齐方式 ），可选值有：
   top ，文本的基线处于文本的正上方，并且有一段距离
   middle ，文本的基线处于文本的正中间
   bottom ，文本的基线处于文本的证下方，并且有一段距离
   hanging ，文本的基线处于文本的正上方，并且和文本粘合
   alphabetic ，默认值，基线处于文本的下方，并且穿过文字
   ideographic ，和bottom相似

相关方法：

measureText() ，返回包含一个对象，该对象包含以像素计的指定字体宽度。

context.measureText('要测量的文本。').width;
//返回要测量的文本的宽度

四、图像绘制：

1、基本使用

var img = new Image();
img.src = 'backdrop.png';
img.onload = function(){
  ctx.drawImage(image, x, y, width, height);
}

x,y 为文本绘制的坐标
width, height 为图像的大小

2、图像切片

drawImage方法可以有 8 个新参数，用于控制切片显示

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

sx, sy 为切割图片源的开始坐标，sWidth, sHeight 为从切割图片源开始坐标的大小，dx, dy 为图像在画布的坐标，dWidth, dHeight 为图像的缩放大小。

五、clip裁切：

使用clip()方法来裁切路径。裁切路径和普通的画布隐藏图形差不多，不同的是它的作用是遮挡，用来不需要的部分。如右图所示。红边五角星就是裁切路径，所有在路径以外的部分都不会在画布上外面出来。

例如，裁切一个圆形路径

ctx.beginPath();
ctx.arc(0,0,60,0,Math.PI*2,true);
ctx.clip();

clip也可以配合drawImage通过路径切割图像的某一部分

ctx.clip()
ctx.drawImage(img, x, y, width, height)

六、绘图转换：

1、scale 缩放当前绘图

ctx.scale(scalewidth, scaleheight);

scalewidth：缩放当前绘图的宽度
scaleheight：缩放当前绘图的高度

2、rotate 旋转当前绘图

ctx.rotate(angle);

angle：旋转角度，以弧度计，例如：Math.PI/2

3、translate 重新修改画布上的位置

ctx.translate(x,y);

x,y 分别为水平坐标（x）和垂直坐标（y）上的值

4、transform 设置绘图的当前转换矩阵

ctx.transform(a,b,c,d,e,f);

a：水平缩放绘图
b：水平倾斜绘图
c：垂直倾斜绘图
d：垂直缩放绘图
e：水平移动绘图
f：垂直移动绘图

5、setTransform 重置并创建新的转换矩阵

请注意，每当您调用 setTransform() 时，它都会重置前一个转换矩阵然后构建新的转换矩阵

ctx.transform(a,b,c,d,e,f);

a：水平缩放绘图
b：水平倾斜绘图
c：垂直倾斜绘图
d：垂直缩放绘图
e：水平移动绘图
f：垂直移动绘图

其他（个人canvas作品）：

以下为之前做的小作品

1、canvas实现动态折线图

感兴趣话可以去我的GitHub下载：https://github.com/1499610503/lineChart_canvas

2、canvas实现动态扇形图

（随机颜色）

3、canvas实现人物小游戏