Canvas是什么

Canvas英文画布，是HTML5出的一个可以在上面绘制一系列图像的元素。

Canvas的使用场景

可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

基本使用方法

在HTML文件中

<canvas id="canvasBox" width="" height=""></canvas>
<!--
注解:
 canvas必须是闭合标签</canvas>不可省,如果省略文档的其他内容将不会显示
只有两个属性width和height如果没用设置宽高默认宽300高150

-->

在JS文件中

const canvasBox=document.querySelector("#canvasbox");//获取画布元素
const ctx=canvasBox.getContext(contextType);
/*获取渲染上下文（具备了绘制和处理展示内容的能力）
contextType参数有
2d：绘制2d图像（创建一个CanvasRenderingContext2D对象作为2d渲染的上下文）
webgl（experimental-webgl）、webgl2：绘制3d图像（实验性）
bitmaprenderer：把位图绘制在canvas上下文上（实验性）
*/

canvas绘制图形的方式：

第一通过矩形

例如绘制矩形：

fillRect(x,y,width,height)//矩形的起点坐标（x,y）矩形的宽高（width,height）
ctx.fillRect(0,0,300,150)//绘制了一个起点坐标为（0,0）宽高分别为300px,150px的矩形
strokeRect(x,y,width,height)//绘制一个矩形边框（x,y）起点坐标矩形长宽（width,height）
ctx.strokeRect(0,0,300,150)//绘制了一个起点坐标为（0,0）长宽分别为300,150
clearRect(x,y,width,heihgt)//清除指定矩形区域，让清除部分完全透明。
ctx.clearRect(x,y,width,heihgt) //清除一个矩形边框（x,y）起点坐标清除矩形长宽（width,height）

第二通过路径

绘制直线

ctx.beginPath();//开始绘制新的路径
ctx.moveTo(x,y)//路径起始坐标
ctx.lineTo(x,y);//绘制直线到指定坐标点
...
ctx.closePath()//闭合路径
ctx.stroke();//实际绘制路径

绘制曲线

ctx.moveTo(x, y);//起始点
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);//分别是第一个控制点的横纵坐标第二个控制点的横纵坐标和结束点的横纵坐标
ctx.stroke();//实际绘制路径

绘制二次贝塞尔曲线

ctx.moveTo(x, y);//起始点
ctx.quadraticCurveTo(cpx, cpy, x, y);//分别是第一个控制点的横纵坐标和结束点的横纵坐标
ctx.stroke();//实际绘制路径

绘制圆弧

context.beginPath();//开始绘制新的路径
ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise])//圆弧圆心横纵坐标半径圆弧开始的角度圆弧结束的角度
context.stroke();//实际绘制路径

绘制矩形

ctx.rect(x,y,width,height)//矩形起始点的横纵坐标和宽高
context.stroke();//实际绘制路径

椭圆绘制

ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
// 椭圆弧对应的圆心横纵坐标椭圆弧的长短轴半径大小椭圆弧的旋转角度圆弧开始和结束的角度顺逆时针
context.stroke()//实际绘制路径

关于样式的相关设置

线条样式的设置

ctx.lineWidth=number//设置线条的宽度
ctx.lineCap=//线头的样式分别buzz（默认），round（圆弧）和square（方头）
ctx.lineJoin=//miter:尖角 round：圆角 bevel：平角
ctx.miterLimit = value;//0-10//设置尖角长度和lineJoin属性值是miter配合使用
ctx.getLineDash()//获取当前线条的虚线数值一个偶数个数的数组
ctx.setLineDash()//线条为虚线参数是个数组如果是[]实线
context.lineDashOffset=value//虚线绘制的偏移距离默认0是浮点数

填充描边

ctx.fillStyle=//填充颜色color gradient pattern
ctx.strokeStyle=//边框颜色color gradient pattern
ctx.stroke()//绘制路径

图像和像素（重点）

//用法：
/*参数说明
image：图片资源
在画布上规划一片区
dx：规划区的横坐标
dy：规划区的纵坐标
dWidth：规划区的宽
dHeight：规划区的高
图片元素绘制在Canvas画布
sx：起始横坐标
sy：起始纵坐标
sWidth：图片元素从坐标点开始算，多大的宽度内容
sHeight：图片元素从坐标点开始算，多大的高度内容*/
context.drawImage(image, dx, dy);
context.drawImage(image, dx, dy, dWidth, dHeight);
context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
//例子
let image= new Image();   //创建一个空元素
		        image.src = Url; // 路径 
		        image.onload = function(){  
					// ctx.drawImage(image,0,0)   
		            ctx.drawImage(image,41,74,64,82,0,0,128,164) //参数依次是要绘制图片，图片从那个坐标点开始绘制，绘制的面积的大小将绘制的图片，绘制在画布中位置以及绘制图片在画布中大小
		        }    

文本

/*
参数说明：
text文本内容
x，y文本在画布中的起点坐标位置
maxWidth文本占据的最大宽度（强制压缩不换行）
*/
ctx.fillText(text, x, y [, maxWidth]);//绘制文本
ctx.strokeText(text, x, y [, maxWidth]);//绘制文本边框
ctx.measureText(text)//获取TextMetrics对象测量文本的宽
//关于文本的样式
ctx.font=""//设置文本字体大小
/*
vulue文本对齐方式
left：左对齐
right：右对齐
center：居中对齐
start：起始方位对齐
end：结束方位对齐
*/
ctx.textAlign=value

状态

ctx.save()//存储
context.restore();//弹出存储状态

渐变

/*
线性渐变
x0,y0渐变起始点横纵坐标
x1,y1渐变结束点横纵坐标
*/
ctx.createLinearGradient(x0, y0, x1, y1);
/*
镜像渐变
x0,y0起始圆得圆心坐标
r0起始圆半径
x1,y1结束圆得圆心坐标
r1结束圆半径
*/
ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

变形

ctx.rotate(angle)//旋转单位是弧度
ctx.scale(x,y)//缩放
ctx.translate(x,y)//位移
ctx.transform(a,b,c,d,e,f)//变形分别水平缩放水平斜切垂直斜切垂直缩放水平位移垂直位移
ctx.setTransform()//同上区别执行会完全重置已有的变换

阴影

ctx.shadowBlur = value;//阴影大小
ctx.shadowColor = color;//阴影颜色
ctx.shadowOffsetX = offset;//阴影水平偏移
ctx.shadowOffsetY = offset;//阴影垂直偏移

透明度和层级

ctx.globalAlpha = value;//透明度0-1
/*
type参数说明:
source-over：直接覆盖在原有图层上面相互叠加（纯视觉覆盖）
source-in：只显示相互叠加的区域（新内容为显示层，原内容是遮罩层）
source-out：和source-in相反（重叠的位置是透明的）
source-atop：重叠内容进行类似遮罩处理未重叠的正常显示
****destination-*和source-*显示主体相对destination以原图层为显示主体sourc以新图层为显示主体****
destination-over
destination-in
destination-out
destination-atop
lighter：混合模式
copy：只显示新内容
xor：互相重叠的区域是透明的
multiply：正片迭代
screen：滤色
overlay：叠加
darken：变暗
lighten：变亮
color-dodge：颜色减淡
color-burn：颜色加深
hard-light：强光
soft-light：柔光
difference：差异
exclusion：排除
hue：色调
saturation：饱和度
color：色值
luminosity：亮度*/
ctx.globalCompositeOperation = type;

图案相关

/*
imag：平铺的CanvasImageSource图像
repetition:
repeat水平垂直平铺
 no-repeat不平铺
 repeat-x水平平铺
 repeat-y垂直平铺
*/
ctx.createPattern(image, repetition)；

位置检测

/*
参数说明
x,y检测的点的横纵坐标
 fillRule参数填充规则
nonzero：非零规则，此乃默认规则。
evenodd：奇偶规则。
*/
//检测点是否在指定路径内
ctx.isPointInPath(x, y);//返回值true和false
ctx.isPointInPath(x, y, fillRule);//返回值true和false

/*
x,y检测的点的横纵坐标
path指Path2D对象*/
//检测点是否在路径上
context.isPointInStroke(x, y);//返回值true和fasle
context.isPointInStroke(path, x, y);//同上

以上就是canvas常用的api，更详尽的学习请查看CanvasAPI相关文档