微信小程序Canvas绘图：实现图表与自定义图片生成

微信小程序的发展使用户的日常生活显得更加便携和智能化。而Canvas技术则为小程序提供更多了一个同时实现自定义绘图的途径。本文将紧紧围绕微信小程序的Canvas技术开发，明确提出有关的问题，并得出适当的解决方案，主要牵涉至如何同时实现图表和自定义图片分解成的技能。

问题1：如何建立Canvas画布

Canvas就是一种二维图形的表明技术，所以在采用Canvas制作图表时，须要先建立绘图区域，也就是画布。下面以一个直观的饼图为基准，展开具体分析和传授。

解决方案：

在结构树上建立Canvas标签，并在Js文件中提及该Canvas对象；而这个建立的Canvas画布就是由小程序提供更多的，开发者不须要自己手动建立Canvas画布。

问题2：如何绘制图形

当Canvas画布建立顺利完成后，接下来就是在Canvas画布上绘制图形了。绘图就是在JavaScript中展开的，而Canvas主要利用以下两个USB去顺利完成绘图：

1）Canvas.getContext()：在画布上建立绘图二维上下文环境

2）Context: 同时实现二维绘制函数

通过上述USB可以便利地对图形展开绘制。

解决方案：

通过Canvas.getContext()USB赢得Canvas对象的绘图二维上下文环境；再通过Context对象去定义和绘制所须要的图形。

问题3：如何绘制饼图

饼图就是一种常用的图表，在微信小程序中的同时实现并不繁杂。下面了解具体内容的同时实现方法。

解决方案：

1）绘制扇形

通过Math.PI和排序角度同时实现饼图的绘制。

比如，绘制一条半径为n+r，起点为0，终点为angle的扇形，代码如下：

let angle = 90;

let r = 100;

let n = 150;

let startAng = 0;

let endAng = (angle / 180) * Math.PI;

ctx.beginPath();//已经开始

ctx.moveTo(n, n);//从圆点启程

ctx.arc(n, n, r, startAng, endAng, false);//x,y,r,初始角，完结角，圆心角

ctx.closePath();//path完结

ctx.setFillStyle("#f00");// 设置颜色

ctx.fill();//采用fill充填实心扇形

2）绘制文字

通过fillText方法同时实现饼图文字的绘制。

比如，绘制一段文本，代码如下：

ctx.setFontSize(14);//设置字体大小

ctx.setFillStyle("#999");//设置颜色

ctx.fillText('微信小程序', 0, 0);//绘制文本

问题4：如何同时实现自定义图片分解成

Canvas技术可以同时实现自定义绘图，同时可以将所绘制的图形留存为一张图形图片。因此，我们可以通过Canvas技术同时实现自定义图片的分解成，便利了图片的制作和采用。

解决方案：

1）建立临时Canvas对象

采用wx.createCanvasContext()方法建立一个临时Canvas对象。

比如：

var context = wx.createCanvasContext('customCanvas')

2）绘制所须要图形

通过Canvas绘制函数，将所须要的图形绘制出。

比如：

context.drawImage('bgImg.jpg', 0, 0, 100, 100);

context.setFillStyle('red')

context.fillRect(80, 80, 150, 150);

context.setFontSize(20)

context.setFillStyle('#fff')

context.fillText('自定义图片', 100, 100)

3）求出图片

调用Canvas对象中的toTempFilePath()方法求出图片。

比如：

context.draw(true, function () {

wx.canvasToTempFilePath({

canvasId: 'customCanvas',

destWidth: 200,

destHeight: 200,

success: function (res) {

console.log(res.tempFilePath)

}

})

})

总结

微信小程序的Canvas技术，可以同时实现图表和自定义图片的分解成，无论是从用户体验还是从开发者的采用角度，都提供更多了非常小的优势。通过本文所讲诉的方案，坚信读者们可以更加深入细致地介绍Canvas技术，为微信小程序增添更多技术创新的可能性。