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,150clearRect(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 patternctx.strokeStyle=//边框色彩color gradient patternctx.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-overdestination-indestination-outdestination-atoplighter：混合模式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和falsectx.isPointInPath(x, y, fillRule);//返回值true和false/*x,y检测的点的横纵坐标path指Path2D对象*///检测点是否在门路上context.isPointInStroke(x, y);//返回值true和faslecontext.isPointInStroke(path, x, y);//同上

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