示例代码托管于：http://www.github.com/dashnowords/blogs博客园地址：《大史住在大前端》原博文目录华为云社区地址:[前端打怪你要的升级指南】[TOC]1.任务描述使用原生canvasAPI绘制雷达图。（截图及数据来自百度Echarts官方示例库【查看示例链接】）。2.KeyTips雷达图的绘制看起来并不复杂，无非是一些路径点的连接，难点在于一些细节。坐标变换为了避免在绘制过程中不断根据夹角计算一个数据点的坐标，我们可以先让坐标系移动到绘图中心，然后在绘制过程中逐渐旋转，使用context.lineTo(x,y)to这样做的好处是显而易见的。比如绘制背景六边形时，每次旋转后，路径点根本不需要移动，只需在循环中每次调用context.lineTo()方法连接同一个数据点即可，貌似位移没有变化。实际上，随着坐标系的旋转，连接线绕过了多边形轨迹。文字对齐为了让文字保持法线方向，我们需要将坐标系的旋转恢复到绘制前的初始状态。绘图过程中，可以根据绘图点与中心线相对x轴的夹角动态修改绘图的相对点（左、右、中），否则会出现下图所示的结果出现，也就是文本区域的中心到图形中心的距离确实是一致的，但这不是我们想要的。对于canvas坐标系，请永远记住canvas坐标系的初始方向是x轴向右，y轴向下，这和普通的笛卡尔坐标系不同，尤其是在计算旋转角度和坐标，很容易出现和预测的角度不匹配的结果。3.示例代码//options数据来自百度Echarts官方示例库start(options);/***绘制图表*/functionstart(options){drawBg(options);drawData(options);//绘制雷达图drawText(options);//绘制文本}functiondrawBg(options){letlength=options.radar.indicator.length;让angleStep=-2*Math.PI/长度；context.strokeStyle="#b2b2b2";context.lineWidth=1;//调整坐标系//移动中心点context.translate(500,300);//将x轴旋转到垂直context.rotate(-90*2*Math.PI/360);//每次从大到小绘制多个旋转半径不同的图形for(letr=200;r>0;r-=40){//移动到第一个绘制点context.save();context.beginPath();context.moveTo(r,0);//旋转坐标系绘制所有点for(leti=0;i
