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

最新推荐文章于 2024-05-14 10:52:37 发布

weixin_39829236

最新推荐文章于 2024-05-14 10:52:37 发布

阅读量726

点赞数

文章标签： canvas rotate 累加旋转 canvas 文字颜色 canvas换图时候会闪烁 canvas清除上一次画的 delphi 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)');折现和折现区域是同一个色号，折现区域设置了透明度

关注