Canvas是小白能看懂的常见前端技术，但由于API数量多，使用复杂，对程序员的数学功底、空间想象力和审美能力有一定要求，所以那些真正擅长canvas的前端不多，但不代表大家学不好canvas。这里我列出了常用的canvas使用场景，希望对大家有所帮助。创建画布Canvas的创建非常简单，只需要一个所有的绘制动作都需要在画布上下文（context）中进行，所以我们需要先创建一个上下文。js:constcanvas=document.getElementById('canvas');constctx=canvas.getContext('2d');除了2d，context也可以设置为：webgl,webgl2,bitmaprenderersetcanvassizejs:canvas.width=600;canvas.height=600;如果你想全屏显示，你可以：canvas.width=window.innerWidth;canvas.height=window.innerHeight;绘制图形1.矩形(Rect)1.填充矩形(fillRect)绘制实心矩形最简单的方法是使用fillRect(x,y,width,height)方法。参数中x和y代表矩形左上角的坐标；width和height分别表示矩形的宽度和高度。使用方法如下：js://设置填充颜色ctx.fillStyle='skyblue';//绘制实心矩形ctx.fillRect(20,20,150,100);效果：2.空心矩形（strokeRect）和绘制实心矩形类似的是使用strokeRect(x,y,width,height)方法绘制空心矩形。参数与fillText方法相同。js：//设置线宽ctx.lineWidth=5;//设置绘图颜色ctx.strokeStyle='chocolate';//绘制空心矩形ctx.strokeRect(20,20,150,100);作用：3.清空矩形区域（clearRect）在重绘画布中的内容（比如动画）时，我们需要先使用clearRect(x,y,width,height)来清空画布。js:ctx.fillStyle='天蓝色';ctx.fillRect(20,20,150,100);//清除画布中的矩形区域ctx.clearRect(25,25,140,90);作用：2.文字（Text）1.实心文字（fillText）绘制文字也是canvas的基本功能。FillText可以使用fillText(text,x,y[,maxWidth])方法。参数中的text表示要绘制的文字；x,y为文字起点坐标；maxWidth为可选参数，表示文本的最大宽度。如果文本超过最大宽度，浏览器将调整字间距、字体或压缩文本以适应最大宽度。js：//设置绘图颜色ctx.fillStyle='purple';//设置字体ctx.font='30pxArial';//绘制纯色ctx.fillText('HelloWorld',220,50);效果：2与strokeText类似，可以使用strokeText(text,x,y[,maxWidth])绘制strokeText，参数与fillText方法一致：js://setlinewidthctx.lineWidth=3;//settextColorctx.strokeStyle='orange';//设置字体ctx.font='50pxArial';//画空心文字ctx.strokeText('HelloWorld',180,50);作用：3.路径（Path）顾名思义，通过路径我们可以定义一段路径（或直线，或曲线）来组合我们想要的图形。1、矩形也可以用Path来画，和fillRect、strokeRect效果一样，只是多了一步。使用rect(x,y,width,height)方法向当前路径添加一个矩形。该方法只会改变路径，不会直接渲染矩形，所以还需要执行fill()或stroke()方法：js:ctx.rect(200,20,200,100);ctx.fillStyle='deeppink';ctx.fill();效果：或者，空心矩形：ctx.rect(200,20,200,100);ctx.lineWidth=3;ctx.strokeStyle='deeppink';ctx.stroke();作用：2.三角形可以使用路径绘制各种自定义图形，比如三角形：js://开始绘制路径ctx.beginPath();//移动到起点ctx.moveTo(200,20);//绘制一条线段ctx.lineTo(300,20);ctx.lineTo(250,150);ctx.lineTo(200,20);//绘制路径ctx.stroke();作用：或者可以在绘制最后一边时使用ctx.closePath()关闭路径。我们也可以给闭合路径填充颜色，绘制实心三角形：js:ctx.beginPath();ctx.moveTo(200,20);ctx.lineTo(300,20);ctx.lineTo(250,150);//关闭路径ctx.closePath();//设置填充颜色ctx.fillStyle='coral';//填充路径ctx.fill();作用：3.圆弧(1)Canvas没有标准的圆弧是专门画圆的方法，而是用更通用的方法arc(x,y,radius,startAngle,endAngle[,anticlockwise])画圆弧。参数中，x、y为圆心坐标；radius是圆的半径；startAngle是圆弧的初始角度；endAngle是圆弧的结束角度；anticlockwise指示是否按逆时针方向绘制路径。比如画一个圆，可以这样写：js:ctx.beginPath();ctx.arc(300,300,60,0,Math.PI*2,true);ctx.stroke();作用：（2）quadraticCurveCanvas也支持绘制二次曲线，使用quadraticCurveTo(cpx,cpy,x,y)方法，参数为两点坐标，其中cpx,cpy为控制点坐标；x,y为终点坐标。使用方法如下：js:ctx.beginPath();ctx.moveTo(150,400);ctx.quadraticCurveTo(300,0,450,400);ctx.stroke();效果：（3）贝塞尔曲线类似是的，canvas也支持绘制普通的贝塞尔曲线，使用bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)，参数中cp1x,cp1y为第一个控制点的坐标；cp2x,cp2y为第二个控制点的坐标；x,y为终点坐标。一个简单的贝塞尔曲线可以表示如下：js:ctx.beginPath();ctx.moveTo(100,400);ctx.bezierCurveTo(200,200,400,400,500,200);ctx.stroke();效果：4.图像（Image）我们也可以在画布上绘制图像，使用drawImage()方法。drawImage()方法具有三个重载：drawImage(image,dx,dy);drawImage（图像，dx，dy，dWidth，dHeight）；drawImage（图像，sx，sy，sWidth，sHeight，dx，dy，dWidth，dHeight）;各参数含义为：image：在画布上绘制的图像源，支持多种类型：CSSImageValue、HTMLImageElement、SVGImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvasdx：在画布上水平绘制的起始点dy：在画布上起始竖向绘制点dWidth：画在画布上的宽度dHeight：画在画布上的高度sx：原图水平裁剪起点sy：原图垂直裁剪起点sWidth：原图水平裁剪宽度directionalcroppingsHeight：在原图上垂直裁剪的高度。前两个重载更容易理解。它们是在画布上绘制完整的源图像，您可以通过设置宽度和高度来控制图像的缩放比例。第三个重载是在canvas上绘制一部分源图片，可以形象地表示为：Imagesource以HTMLImageElement为例，在canvas上绘制图片可以实现如下：html:
