canvas(一)
坑军之王
226
1.概论
canvas是一个非常强大的工具，我们可以借助canvas进行绘画、进行图片的编辑。在网页上对图片进行剪切就是应用方式之一。
2.分类
我们使用canvas，基本上能做到以下事情：画直线、画矩形、画圆、画图片、清除画布，其他的绘制基本上是在前面的基础上进行组合而实现的
3.基础API
在进行基础API介绍之前，首先我们需要知道canvas是如何画出东西的：
①、创建画布 [在html中使用<canvas></canvas>标签]
②、获取画布 [通过DOM操作获取 如：var canvas = document.querySelector('.canvas');]
③、获取画布的上下文（可以这么理解：获取画画的工具）
[在获取的画布中确定绘画的属性，如： var pen = canvas.getContent('2d');]
④、开始路径 [pen.beginPath;]
⑤、设置画笔属性（画笔属性包括：画笔颜色、画笔粗细、填充颜色设置、描边颜色设置等）
⑥、着色 [pen.stroke(); 或者 pen.fill();]
⑦、结束路径 [ pen.closePath();]
注：如果涉及到多个上下文获取时，只要不是最后一个绘画 ，都可以省略结束路径，在下一个画笔开始路径的时候，会自动填充结束路径。
画直线
画直线包括起始点和结束点的选择
| 起始点 | 结束点 |
| moveTo(x1,y1)； | lineTo(x2,y2) |
其中lineTo可以在结束路径之前有多个，以达到直线转弯的效果。使用如下：
var canvas = document.querySelector('#cont');
var sxw=canvas.getContext('2d');//获取画的能力
sxw.beginPath();
//直线（带转弯）
sxw.moveTo(10,10);
sxw.lineTo(20,20);
sxw.lineTo(20,30);
//
sxw.stroke();
sxw.closePath();以下是我封装的一个画直线的方法和画虚线方法，可以复制后直接用：
//画直线
function drawLine(x1,y1,x2,y2,color){
sxw.beginPath();
sxw.moveTo(x1,y1);
sxw.lineTo(x2,y2);
sxw.strokeStyle = color || '#000';
sxw.stroke();
sxw.closePath();
}
//画虚线
/** 横向直线
* @param {Object} x1
* @param {Object} y1
* @param {Object} x2
* @param {Object} y2
* @param {Object} color
* @param {Object} width 线的宽度
* @param {Object} line 虚线有的长度
* @param {Object} space 虚线空格
*/
function drawNoLine(x1,y1,x2,y2,color,width,line,space){
//重复劳动用for循环
var lengthX=x2-x1;//30
lengthX = lengthX/(line+space);
for(let i=0;i<lengthX;i++){
drawLine(x1+i*line,y1,x1+space+i*line,y1,color,width);
}
}
//其中画虚线的功能是基于画直线上的画矩形
画矩形是基于 XXRect（）函数的，对其说明如下：
strokeRcet（x,y,w,h）; //描边画矩形
fillRect(x,y,w,h);//填充画矩形
x:初始横坐标（基于canvas画布的）
y:初始纵坐标
w:矩形的宽
h:矩形的高在这里对XX说明以下：无论是直线还是虚线、矩形还是接下来要说的圆、甚至包括文字，都分为stroke和fill两种着色方式，分别为描边和填充。
画圆
画圆是基于arc（）函数实现的，以下对参数进行说明
arc(x,y,radius,startAngle,endAngle,counterClock)
x:圆心横坐标
y:圆心纵坐标
radius：圆的半径
startAngle：起始角度
endAngle：结束角度
counterClock：顺时针还(false)是逆时针 (true)
至于圆是实心还是空心的，看着色方式是stroke还是fill就是了
画图片
画图片基于drawIamge（）函数，而其参数有三种方式，在下面将对三种参数组合方式进行说明：
drawImage(img,x,y)
/**
* img 图片的url
* x 图片的横坐标
* y 图片的纵坐标
**/
drawImage(img,x,y,width,height)
/**
* width：canvas画布中图片的宽度
* height：canvas画布中图片的高度
**/
drawImage(img,sx,sy,switth,sheight,x,y,width,height)
/**
* sx：剪切图片的x坐标
* sy：剪切图片的y坐标
* swidth：剪切图片的宽度（基于图片）
* sheight：剪切图片的高度（基于图片）
**/
以上三个代码都需要在以下环境中使用：
var img =new Image（）；
img.src=“url”；//此处决定绘制的图片
img.onload=function(){
上面说明的函数
}写文字
写文字依托于XXText（）函数，XX指的是着色防止，分别是stroke（描边、空心）和fill（填充、实心）
fillText（text,x,y,maxWidth） //实心文字
strokeText(text,x,y,maxWidth) //空心文字
text: 文字内容
x：文字初始横坐标
y：文字初始纵坐标
maxWidth：文字所占最大宽度
其中针对文字的样式还有以下属性：
font： 文本信息，主要用来决定文字的样式，包括文字大小、文字字体等属性
fillStyle：填充颜色，决定实心文字的样式，在画圆和矩形的操作时也决定他们的内填充色
strokeStyle：描边颜色，决定空心文字的描边颜色，在画圆和矩形的时候也决定他们的描边颜色
textAlign：文字对齐方式（横向），决定文字的横向对齐方式，有这些属性：start end left center right
textBaseline：文字对齐方式（纵向），决定文字的横向对齐方式，有这些属性： top bottom middle
清除画布
清除画布基于clarRect（）函数，参数及说明如下：
clearRect(x,y,width,height);//动画效果必备
x:初始横坐标
y:初始纵坐标
width:矩形的宽
height:矩形的高
实际上效果就是绘制一个矩形的清除区域