Lucky_Q的博客

折（曲）线图折线图和曲线图最主要的地方就是获取到当前点以及下一个点的坐标值，只要有了这两个值，其他的都不是问题。canvas绘制曲线主要用的的是二次贝塞尔曲线和三次贝塞尔曲线二次贝塞尔曲线ctx.moveTo(20,20) //开始点坐标 ctx.quadraticCurveTo(20,100,200,20); //控制点坐标的xy和结束点坐标的xy三次贝塞尔曲线ctx.moveTo(...

气泡图这里做的气泡图是柱形图的一种变体形式，但是基本思想其实差不多，只不过柱形的高矮换成的半径的大小，当然圆心的坐标也要随之改变，圆心的纵坐标要加上跟半径同比例的缩放系数才能保证圆的底部都在同一条水平线上图一function ybChart(data, index) { var dataMax = 0 for (let i = 0; i < data.length; i++)...

柱图canvas画图最主要的就是把一张图分成各个部分，然后一块一块的去进行绘制，比如柱图，在绘制的过程中就可以分成x轴，x轴的label，y轴，y轴的label，平行于x轴的分割线，以及每个柱体等等和一些细节。柱图的x轴就是等分嘛，有几个数据就等分成几块，y轴就是先得出数据的最大值，然后看你想把这最大值均分成几份嘛，比如把1200分成4份，那y轴就是被均分成四份，每个刻度就是300还是要强...

仪表盘图仪表盘其实也是环图的一种，但是比环图多的是一个指针，指针需要根据环图的进度调整位置，而这其中主要用到的就是canvas的旋转，但是注意的是canvas的旋转是以画布原点为旋转中心旋转的，因此，我们需要将旋转中心调整到我们需要的位置，再对画布进行旋转，要记得旋转完成之后，需要逆向旋转并平移复位，不然之后会错位的js有一点需要注意的是，如果其中有一段描边使用了ctx.setLineDa...

环图canvas制作圆形所用的方法是ctx.arc(x,y,r,0,Math,PI*2,false)其中的6个参数分别是圆心横坐标，圆心纵坐标，半径，起始角度，结束角度，false顺势针/true逆时针而圆环也是用的这个方法，只不过是ctx.fill()填充，替换成了ctx.stroke()描边，利用描边我们就可以绘制出任何大小及弧度的圆环了，通过ctx.linewidth可以设置描边的...