canvas rotate 累加旋转_微信小程序canvas画图总结

本章为自己使用微信小程序canvas画图的总结，包括环形图和折线图。先上效果图

环形图和折线图

一：环形图。画环形图非常简单，程序小白也无需慌张。 先上代码

环形图源码

重点归纳：

• CanvasContext.beginPath();//在最开始的时候相当于调用了一次beginPath；如果在一个canvas中需要画多条线，需要调用beginPath来开启路径，调用closePath()来关闭路径。closePath会连接起点和终点。
• 如果没有调用

  fill

  或者

  stroke

  并开启了新的路径，那之前的路径将不会被渲染
• ctx.setFillStyle('red')；//填充色 。ctx.setStrokeStyle('red')；//描边颜色。设置字体颜色使用ctx.setFillStyle('red')；
• context.draw();//将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。不需要像stroke一样每开启一条路径都需要调用一次stroke.调用一次draw()方法会将之前在画布中绘制的图形都画出来

二：第一张图折现图的源码

重点归纳：

• 坐标系转换。canvas的坐标起点是左上角，我们常规思维的坐标系起点为左下角，这时候需要进行坐标系转换。 ctx.translate(35, 130);//平移原点坐标 ctx.rotate(Math.PI);//将坐标系旋转180°，得到与数学坐标系水平相反的坐标系 ctx.scale(-1, 1);//将坐标系水平翻转
• 翻转坐标系后文字也是反的，所以需要在翻转坐标系之前先填充坐标轴文字
• 淡蓝色折现区域//利用两个金额点和两个坐标点形成闭合区域，然后填充。
• ctx.setFillStyle('rgba(14,156,255,0.2)');折现和折现区域是同一个色号，折现区域设置了透明度