小程序中的绘图一般是需要canvas来制作完成，，，，，，那么怎样合理使用小程序canvas举行绘图，，，，，，并且图片及文本适配呢。。
。
。。。下面逐一来解答。。
。
。。。

场景需求

小程序现在不支持直接分享到朋侪圈，，，，，，以是关于有分享到朋侪圈的需求，，，，，，一般是天生一张图片，，，，，，例如，，，，，，天生一张带有小程序码的图片，，，，，，用户可以将这张图片生涯到手机外地，，，，，，然后将这张图片分享到朋侪圈。。
。
。。。这张图片需要使用canvas画出来。。
。
。。。

今天我们不讲怎么天生码，，，，，，这个一般是后端封装一个API，，，，，，前端通过挪用API获得一个小程序码的url，，，，，，通过image去画到canvas上，，，，，，跟在canvas上画一个image是一样的逻辑。。
。
。。。这篇文章主要是讲怎么在canvas上适配图片和文字，，，，，，也就是怎么将图片和文本画到canvas上的准确的位置，，，，，，能在差别的手机上都能准确的展示。。
。
。。。

效果图展示（以下图片是在微信开发者工具中显示的） 
这里演示的Demo是： 
“选择图片”button选择一张图片，，，，，，可以居中显示在以下图中的黄色区域，，，，，，即canvas中，，，，，，并在canvas的顶部居中展示文本“你若盛开，，，，，，蝴蝶自来”。。
。
。。。

wxml

1. <button bindtap="chooseImg">选择图片</button>
2. <view class="canvas-box">
3. <canvas class="canvas" canvas-id="shareCanvas" bindlongtap="saveShareImage"></canvas>
4. </view>

$3. scss（wxss）  这里我用的是scss去写样式代码，，，，，，在webStorm中可以通过设置，，，，，，将scss剖析成wxss，，，，，，至于详细怎么设置，，，，，，可以自行百度。。
。
。。。  PS1：这里界说了一个scss rpx function，，，，，，是由于在webStrom中名堂化代码的时间会将数字和单位rpx中心添加一个空格，，，，，，导致编译报错，，，，，，以是用一个function行止置  PS2：样式说明（设计稿是基于iphone6视觉稿标准）：  button宽高：700rpx * 92rpx (350px * 46px)  包裹canvas的容器的view（.canvas-box）position:fixed,占有除顶部button的高度之外，，，，，，填满剩余所有空间，，，，，，canvas居中显示，，，，，，宽高：700rpx，，，，，， 100%

1. @function rpx($value) {
2. @return $value*1rpx;
3. }
4.  
5. page {
6. background-color: #fff6f6;
7. button {
8. width: rpx(700);
9. height: rpx(92);
10. background-color: #ffddab !important;
11. }
12. .canvas-box {
13. position: fixed;
14. top: rpx(92);
15. left: 0;
16. right: 0;
17. bottom: 0;
18. canvas {
19. position: absolute;
20. width: rpx(700);
21. height: 100%;
22. top: 50%;
23. left: 50%;
24. transform: translate(-50%, -50%);
25. }
26. }
27. }

$4. js  1、在data中界说三个变量

1. data: {
2. windowWidth: 0, // 可使用窗口宽度
3. windowHeight: 0, // 可使用窗口高度
4. ratio: 0 // 凭证尺寸动态盘算 1px换算成几多rpx
5. }

2、通过wx.getSystemInfo获得系统信息，，，，，，并且盘算ratio

1. onReady: function (e) {
2. // 获取系统信息
3. wx.getSystemInfo({
4. success: res => {
5. console.log(res);
6. this.setData({
7. windowWidth: res.windowWidth,
8. windowHeight: res.windowHeight,
9. });
10. this.setData({
11. // 屏幕宽度 375px = 750rpx，，，，，，1px=2rpx
12. // 1px = （750 / 屏幕宽度）rpx；；；；
    ；
13. // 1rpx = （屏幕宽度 / 750）px;
14. ratio: 750 / this.data.windowWidth
15. });
16. }
17. });
18. },

3、button的触发事务chooseImg，，，，，，通过wx.chooseImage选择图片，，，，，，通过wx.getImageInfo获取选择的图片的巨细

1. chooseImg: function () {
2. wx.chooseImage({
3. count: 1,
4. success: res => {
5. let imgUrl = res.tempFilePaths[0];
6. // 获取图片巨细
7. wx.getImageInfo({
8. src: imgUrl,
9. success: data => {
10. let imgWidth = data.width;
11. let imgHeight = data.height;
12.  
13. // 建设canvas，，，，，，凭证选择的图片巨细，，，，，，在canvas上绘制图片和文字
14. this.createCanvasShareImage(imgUrl, imgWidth, imgHeight);
15. }
16. });
17. }
18. });
19. }

4、建设canvas并在canvas上添加图片和文本

1. createCanvasShareImage: function (imgUrl, imgW, imgH) {
2. // 使用wx.createCanvasContext获取绘图上下文 context
3. let context = wx.createCanvasContext('shareCanvas');
4. console.log('context: ', context);
5.  
6. // 获取canvas的宽度：
7. // 750的设计稿基于iphone6的尺寸（屏幕宽度： 375px）在小程序中的比例是： 1px = 2rpx ==> 375px = 750rpx ==> 屏幕宽度(px) = 750rpx
8. // 以是 1rpx = 屏幕宽度 / 750
9. // 我们这里css中设置的 canvas 的width：700rpx, 以是 canvas的宽度盘算是： [（屏幕宽度 / 750）* 700]rpx，，，，，， 这样就可以做到在差别手机上都可以适配
10. let canvasWidthPx = 700 / this.data.ratio;
11.  
12. // 设置 canvas 的配景并填充canvas
13. context.fillStyle = '#ffdc22';
14. context.fillRect(0, 0, canvasWidthPx, this.data.windowHeight);
15.  
16. // 绘制图片：图片居中显示在 canvas 中
17. let imgX = (700 - imgW) / 2;
18. let imgY = (this.data.windowHeight * this.data.ratio - 46 * this.data.ratio - imgH) / 2;
19. let clipWidth = imgW * this.data.ratio;
20. let clipHeight = imgH * this.data.ratio;
21. context.drawImage(imgUrl, -imgX, -imgY, clipWidth, clipHeight, 0, 0, imgW, imgH);
22.  
23. // 设置字体巨细、文本颜色
24. context.setFontSize(20);
25. context.fillStyle = "#000";
26.  
27. // 盘算文本的宽度：measureText() 取到文本的 width
28. let txtWidth = context.measureText('你若盛开，，，，，，蝴蝶自来').width;
29.  
30. // 绘制居中文本：这个地方的 (x, y)的坐标是在文本的左下角位置
31. context.fillText("你若盛开，，，，，，蝴蝶自来", (canvasWidthPx - txtWidth) / 2, 20 * this.data.ratio);
32.  
33. context.draw();
34. }

5、长按bindlongtapcanva生涯图片或者直接预览图片，，，，，，先通过wx.canvasToTempFilePath将目今画布指定区域的内容导出天生指定巨细的的图片，，，，，，再通过wx.saveImageToPhotosAlbum将图片生涯到外地，，，，，，或者通过wx.previewImage直接预览图片。。
。
。。。

1. saveShareImage() {
2. wx.canvasToTempFilePath({
3. canvasId: 'shareCanvas',
4. success: (res) => {
5. console.log('canvasToTempFilePath： ', res);
6. // 将图片生涯到相册
7. wx.saveImageToPhotosAlbum({
8. filePath: res.tempFilePath,
9. success: (data) => {
10. console.log(data);
11. }
12. });
13.  
14. // 直接预览图片
15. wx.previewImage({
16. urls: [res.tempFilePath]
17. })
18. }
19. })
20. }