微信小程序实战教程之canvas绘画板+保存图片
1、绘制图片：先使用wx.getImageInfo（）获取图片信息（网络图片需先配置download域名），然后再用ctx.drawImage（）进行绘制。保存图片：使用wx.saveImageToPhotosAlbum（）方法保存图片到手机系统相册。通过以上步骤，我们就可以在微信小程序中实现一个功能完善的绘画板，并允许用户保存所绘制的图片。
小程序web版canvas实现
首先，理解在浏览器环境下canvas的使用。在小程序中，开发者需要通过一套虚拟DOM API来实现类似功能，以便进一步封装和接入如Vue、react等成熟的前端框架。这个API的实现确保了开发者在小程序环境中也能拥有友好的绘图能力。
通过利用微信小程序的Canvas API，可以实现动态气泡效果。首先，需在页面文件（wxml）中创建Canvas组件并设定好宽高。接着，进入页面逻辑文件（js），获取Canvas上下文，通过一系列Canvas绘图方法如beginPath、moveTo、arc、lineTo和closePath等绘制气泡的基本形状。
在touchmove事件中，我们需要获取手指的当前位置，并使用canvas的绘图API将这个位置绘制到画布上。为了实现连贯的绘图效果，我们需要在每次绘制之前清空画布（使用ctx.clearRect（），然后重新绘制之前所有的点。
微信小程序内使用canvas绘制自定义折线图表
在微信小程序内使用canvas绘制自定义折线图表的步骤如下：初始化canvas：在小程序的wxml文件中定义一个canvas组件，并设置其id和样式。获取canvas上下文：在小程序的js文件中，使用wx.createCanvasContext方法获取canvas的绘图上下文。这个方法需要传入canvas的id。
无需赘言，下面展示最终的自定义折线图表在微信小程序canvas中的实现效果：遇到的主要挑战：这个项目基于mpvue开发的小程序，因此代码采用了Vue的编程风格，适合微信小程序环境。对于不熟悉的部分，代码中留有注释，如有疑问，欢迎随时提问。如果对示例有任何疑问，欢迎留言交流。
Charts for WeChat Small app： 功能特点：这是一个专为微信小程序设计的图表工具，它支持在Canvas上进行各种图表的绘制，如折线图、柱状图、饼图等。开发者可以通过简单的配置和调用，即可在微信小程序中实现丰富的图表展示功能。
wx.canvasToTempFilePath可以将canvas内容导出为临时文件路径，方便后续操作，如保存文件等。在某些情况下，context.drawImage的绘制行为可能有所不同。综上所述，虽然微信小程序中的canvas与H5 canvas有许多相似之处，但在使用方法和行为上存在一些重要差异。
创建一个canvas元素作为绘图区域。创建Start和Stop按钮，用于控制折线图的动态更新。引入必要的JavaScript库：引用jQuery库，虽然这不是必需的，但使用它可以简化DOM操作和事件绑定。引入自定义的script.js文件，该文件包含绘制折线图的主要逻辑。
