什么是CanvasCanvas英文画布是HTML5的一个元素，可以在上面绘制一系列的图像。Canvas使用场景可用于动画、游戏画面、数据可视化、图像编辑、实时视频处理等。基本使用方法在HTML文件中在JS文件中constcanvasBox=document.querySelector("#canvasbox");//获取canvas元素constctx=canvasBox.getContext(contextType);/*获取canvas元素renderingcontext（具有绘制和处理显示内容的能力）contextType参数为2d：draw2dimages（创建一个CanvasRenderingContext2D对象作为2d渲染的context）webgl（experimental-webgl），webgl2：Draw3Dimages（experimental）bitmaprenderer：在canvascontext上绘制位图（实验性）*/canvas绘制图形的方式：首先通过矩形绘制矩形，例如：fillRect(x,y,width,height)//矩形的起始坐标(x,y)矩形的宽高(width,height)ctx.fillRect(0,0,300,150)//绘制一个矩形strokeRect，起始坐标为(0,0)，宽高分别为300px和150px(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()//closepathctx.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();//其实画thepathanddrawthearccontext.beginPath();//开始绘制新路径ctx.arc(x,y,radius,startAngle,endAngle[,anticlockwise])//圆心的横纵坐标TheangleatthebeginningofarcTheangleattheendofarccontext.stroke();//实际绘制路径并绘制矩形ctx.rect(x,y,width,height)//水平和垂直矩形起点的坐标和宽高context.stroke();//实际绘制路径ellipsedrawsctx.ellipse(x,y,radiusX,radiusY,rotation,startAngle,endAngle,anticlockwise)//横坐标椭圆弧圆心的纵坐标椭圆弧的长短轴半径椭圆弧的旋转角度椭圆弧的起点和终点之间的角度是顺时针上下文。stroke()//实际绘制路径样式的相关设置Linestylesettingctx.lineWidth=number//设置线的宽度ctx.lineCap=//线头的样式分别为buzz（默认），round（圆弧）和square（方头）ctx.lineJoin=//miter：尖角round：圆角bevel：平角ctx.miterLimit=value;//0-10//设置miter的长度和lineJoin属性的值配合miter使用ctx.getLineDash()//获取当前行的虚线值一个数组ofevennumbersctx.setLineDash()//直线为虚线参数为数组如果为实线context.lineDashOffset=value//虚线绘制的偏移距离默认为0为浮点数填充描边ctx.fillStyle=//填充颜色颜色渐变图案ctx.strokeStyle=//边框颜色颜色渐变图案ctx.stroke()//绘制路径图像和像素（强调）//用法：/*参数说明图像：图片资源在画布上规划一个区域dx：规划区域的横坐标dy：规划区域的垂直坐标dWidth：规划区域的宽度dHeight：规划区域的高度图片元素在Canvas画布上绘制sx：起始横坐标sy：起始纵坐标sWidth：从第th开始的图片元素的宽度e坐标点内容sHeight：图片元素从坐标点开始算，内容的高度是多少*/context.drawImage(image,dx,dy);context.drawImage(image,dx,dy,dWidth,dHeight);context.drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight);//例子letimage=newImage();//创建一个空元素image.src=Url;//pathimage.onload=function(){//ctx.drawImage(image,0,0)ctx.drawImage(image,41,74,64,82,0,0,128,164)//参数是绘制图片依次从该坐标点开始绘制图片，绘制区域的大小为绘制的图片，绘制在画布中的位置和绘制的图片在画布中的大小}text/*参数说明：text文本内容x,y画布中的文本起点坐标位置maxWidth文字占用的最大宽度（强制压缩不换行）*/ctx.fillText(text,x,y[,maxWidth]);//绘制文字ctx.strokeText(text,x,y[,maxWidth]);//绘制文字边框ctx.measureText(text)//获取TextMetrics对象测量的文字宽度//关于文字的样式ctx.font=""//设置文字字体size/*vulue文本对齐left:左对齐right:右对齐center:居中对齐start:开始方向对齐end:结束方向对齐*/ctx.textAlign=valuestatectx.save()//storecontext.restore();//弹出存储状态渐变/*linearGradientx0,y0渐变起点横纵坐标x1,y1渐变终点横纵坐标*/ctx.createLinearGradient(x0,y0,x1,y1);圆半径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;//Shadowcolorctx.shadowOffsetX=offset;//ShadowHorizo??ntaloffsetctx.shadowOffsetY=offset;//Shadowverticaloffsettransparencyandlevelctx.globalAlpha=value;//透明度0-1/*类型参数说明：source-over：直接叠加在原有图层上，相互叠加（纯视觉覆盖）source-in：只显示叠加区域（新增内容为显示层，原有内容为遮罩层）source-out:与source-in相反（重叠位置透明）所以urce-atop:重叠的内容同样被屏蔽正常显示不重叠****destination-*andsource-*showthesubjectrelativetotheoriginallayerasdisplaysubjectsourceusethenewlayerasthedisplaysubject****destination-overdestination-indestination-outdestination-atoplighter:混合模式copy:只显示新内容xor:重叠区域透明multiply:正片迭代screen:滤色overlay:overlaydarken:darkenlighten:brightencolor-dodge:Colordodgecolor-burn：颜色加深hard-light：强光soft-light：柔光difference:differenceexclusion:excludehue:huesaturation:saturationcolor:colorvalueluminosity:brightness*/ctx.globalCompositeOperation=type;patternrelated/*imag:tiledCanvasImageSourceimagerepetition:repeathorizo??ntalverticaltileno-repeatnotilerepeat-xhorizo??ntaltilerepeat-yverticaltile*/ctx.createPattern(图像，重复);positiondetection/*parameters说明x,y检测到的点的横纵坐标fillRule参数填充规则nonzero:非零规则，这是默认规则evenodd:奇偶规则。*///检查点是否在指定路径内ctx.isPointInPath(x,y);//返回值true和falseSectx.isPointInPath(x,y,fillRule);//返回值true和false/*x,y检测点路径的横纵坐标参考Path2D对象*///检测点是否在路径上context.isPointInStroke(x,y);//返回值为trueandfaslecontext.isPointInStroke(path,x,y);//同上是canvas常用的API。更详细的学习可以参考CanvasAPI的相关文档
