微信小程序canvas图表怎么绘制？

　　小程序开发者们会不停地寻找让小程序开发过程尽可能简单的工具，最近小编发现微信小程序canvas是大家使用得比较多的，那么微信小程序canvas图表要怎么绘制呢?一起来看看微信小程序canvas图表绘制的实例详解。

　　wx.createContext()

　　创建并返回绘图上下文context对象。

　　context

　　 context只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个。

　　// 假设页面上有3个画布

　　var canvas1Id = 3001;

　　var canvas2Id = 3002;

　　var canvas3Id = 3003;

　　var context = wx.createContext();

　　[canvas1Id, canvas2Id, canvas3Id].forEach(function (id) {

　　context.clearActions();

　　// 在context上调用小程序方法

　　wx.drawCanvas({

　　canvasId: id,

　　actions: context.getActions();

　　});

　　});

　　context对象的方法列表：

　　小程序参数说明

　　getActions无获取当前context上存储的绘图动作

　　clearActions无清空当前的存储绘图动作

　　变形

　　scale 对横纵坐标进行缩放

　　rotate 对坐标轴进行顺时针旋转

　　translate 对坐标原点进行缩放

　　save无保存当前坐标轴的缩放、旋转、平移信息

　　restore无恢复之前保存过的坐标轴的缩放、旋转、平移信息

　　绘制

　　clearRect 在给定的矩形区域内，清除画布上的像素

　　fillText 在画布上绘制被填充的文本

　　drawImage 在画布上绘制图像

　　fill无对当前路径进行填充

　　stroke无对当前路径进行描边

　　路径

　　beginPath无开始一个路径

　　closePath无关闭一个路径

　　moveTo 把路径移动到画布中的指定点，但不创建线条。

　　lineTo 添加一个新点，然后在画布中创建从该点到最后指定点的线条。

　　rect 添加一个矩形路径到当前路径。

　　arc 添加一个弧形路径到当前路径，顺时针绘制。

　　quadraticCurveTo 创建二次方贝塞尔曲线

　　bezierCurveTo 创建三次方贝塞尔曲线

　　样式

　　setFillStyle 设置填充样式

　　setStrokeStyle 设置线条样式

　　setShadow 设置阴影

　　setFontSize 设置字体大小

　　setLineCap 设置线条端点的样式

　　setLineJoin 设置两线相交处的样式

　　setLineWidth 设置线条宽度

　　setMiterLimit 设置最大倾斜

　　方法详解：

　　scale

　　在调用scale()方法后，之后创建的路径其横纵坐标会被缩放。多次调用scale，倍数会相乘。

　　参数类型范围说明

　　scaleWidthNumber1=100%，0.5=50%，2=200%，依次类推横坐标缩放的倍数

　　scaleHeightNumber1=100%，0.5=50%，2=200%，依次类推纵坐标轴缩放的倍数

　　示例代码：下载

　　//scale.js

　　Page({

　　onReady:function(e){

　　var context = wx.createContext();

　　context.rect(5,5,25,15)

　　context.stroke();

　　context.scale(2,2); //再放大2倍

　　context.rect(5,5,25,15);

　　context.stroke();

　　context.scale(2,2); //再放大2倍

　　context.rect(5,5,25,15)

　　context.stroke();

　　wx.drawCanvas({

　　canvasId:1,

　　actions:context.getActions()

　　});

　　}

　　})

　　rotate

　　以原点为中心，原点可以用translate方法修改。顺时针旋转当前坐标轴。多次调用rotate，旋转的角度会叠加。

　　参数类型范围说明

　　rotateNumberdegrees * Math.PI/180;degrees范围为0~360旋转角度，以弧度计

　　微信小程序canvas图表绘制示例代码：

　　//rotate.js

　　Page({

　　onReady:function(e){

　　var context = wx.createContext();

　　context.rect(50,50,200,200)

　　context.stroke();

　　context.rotate(5*Math.PI/180)

　　context.rect(50,50,200,200)

　　context.stroke();

　　context.rotate(5*Math.PI/180)

　　context.rect(50,50,200,200)

　　context.stroke()

　　wx.drawCanvas({

　　canvasId:1,

　　actions:context.getActions()

　　});

　　}

　　})

　　看完以上微信小程序canvas图表绘制的实例详解，大家对于微信小程序canvas的了解是不是又多了一些呢?如果想要获取更多相关的资料，你可以在微信小程序商店进行小程序关键词搜索。

　　微信小程序canvas重绘的代码及效果

　　微信小程序重置表单的方法

　　微信小程序表单制作是怎样的?