前端页面开发过程中偶尔需要展示数据对应的数学模型，或者地理位置的动态展示。你可能会想到使用画布。网上有很多集成的。比如类似echarts，确实很强大，而且用到了canvas，所以下面研究一下canvas的使用，做一个总结，方便复习。1.使用canvas画线：首先在页面定义一个canvas标签然后在js中开始画线varline=document.getElementById('line');if(line.getContext){varlineCtx=line.getContext('2d');lineCtx.moveTo(50,50);lineCtx.lineTo(150,150);lineCtx.stroke();}首先找到需要绘制图片的canvas元素，然后判断浏览器是否支持canvas，然后开始绘制。画线的步骤非常简单。定义起始位置坐标后，使用stroke()函数进行绘制；2.使用画布矩形画一条线：varrect=document.getElementById('rect');if(rect.getContext){varrectCtx=rect.getContext('2d');rectCtx.fillStyle='#7068D6';rectCtx.fillRect(50,50,100,100);}fillStyle用于填充矩形的颜色，fillRect(x,y,width,height)填充矩形；3.使用canvas画圆：varcircle=document.getElementById('circle');if(circle.getContext){varcircleCtx=圆。getContext('2d');circleCtx.beginPath();circleCtx.arc(100,100,50,0,2*Math.PI);circleCtx.stroke();}绘制制作圆形和矩形之间有一点区别。需要先beginPath()，再用arc（圆心x轴坐标，圆心y轴坐标，半径长度，起点度数，终点度数）。画圆的时候是顺时针开始的，所以如果要画圆弧，需要知道怎么画4.绘制文字：vartxt=document.getElementById('txt');if(txt.getContext){vartxtCtx=txt.getContext('2d');txtCtx.font='30px宋体';txtCtx.fillText('hi,鹿晗',50,50);txtCtx.strokeText('hi.luhan',50,100);}绘制多少个文本可以设置两个参数，font,fillText('texttodraw',x,y)，注意fillText是填充文本，那么什么是drawn是实心文字，strokeText('要绘制的文字',x,y)drawn是空心文字；5.结合以上绘制方法绘制笑脸：.getContext){varmapCtx=canvas.getContext('2d');mapCtx.beginPath();mapCtx.arc(75,75,50,0,Math.PI*2,true);mapCtx.moveTo(110,75);mapCtx.arc(75,75,35,0,Math.PI,false);mapCtx.moveTo(65,65);mapCtx.arc(60,65,5,0,Math.PI*2,真);mapCtx.moveTo(95,65);mapCtx.arc(90,65,5,0,Math.PI*2,真);mapCtx.stroke();}6.使用canvas绘制静态图片：</canvas>varimg=document.getElementById('img');if(img.getContext){varimgCtx=img.getContext('2d');varimgEl=newImage();imgEl.src='img/headPic.jpg';imgEl.onload=function(){imgCtx.drawImage(imgEl,10,10,100,100);}}等待图片资源加载完成，开始绘制drawImage(pictureelement,x,y,width,height);以上是在canvas上绘制各种图形的总结。如果要绘制复杂的图形，可能需要使用集成的组件来更加方便。数据转图形推荐使用Echarts。官方有很多例子。Echarts实例说明，如果你想要炫酷的动画，推荐17个素材网站最后，在前端开发过程中，如果你只需要某部分实现的canvas，可以直接使用网上集成的。如果了解了基本原理，就可以猜到在使用过程中会不会出现什么问题。大概，不要浪费太多时间
