微信小程序canvas绘制 微信小程序API 绘·导出canvasToTempFilePath(OBJECT)

微信小程序canvas绘制

微信小程序的canvas绘制是一种非常有用的功能，它可以让开发者在小程序中创建出各种各样的图形和动画。它可以让开发者在小程序中创建出复杂的图形，如折线图、柱状图、饼图、雷达图、地图、3D模型等。此外，它还可以用于创建动画，如游戏动画、特效动画、广告动画等。

微信小程序canvas的使用非常方便，开发者只需要在wxml文件中声明一个canvas标签即可：

然后在js文件中通过wx.createContext()方法来获取一个CanvasRenderingContext2D对象：

let context = wx.createContext();

之后就可以使用context对象来进行canvas的相关操作了。例如，使用context.setStrokeStyle()方法来设置描边样式：

context.setStrokeStyle('#000000');

或者使用context.fillRect()方法来在canvas上绘制一个正方形：

context.fillRect(0, 0, 100, 100);

最后通过wx.drawCanvas()方法将内容呈现出来即可。例如：

wx.drawCanvas({ canvasId: 'myCanvas', actions: context.getActions() }); 
微信小程序API 绘图·导出图片canvasToTempFilePath(OBJECT)

    
        绘图接口和方法
wx.canvasToTempFilePath(OBJECT)

把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。

OBJECT参数说明：

    

        

            
参数
            
类型
            
必填
            
说明
            
最低版本
        
    
    

        

            
x
            
Number
            
否
            
画布x轴起点（默认0）
            
1.2.0
            
        
        

            
y
            
Number
            
否
            
画布y轴起点（默认0）
            
1.2.0
            
        
        

            
width
            
Number
            
否
            
画布宽度（默认为canvas宽度-x）
            
1.2.0
            
        
        

            
height
            
Number
            
否
            
画布高度（默认为canvas高度-y）
            
1.2.0
            
        
        

            
destWidth
            
Number
            
否
            
输出图片宽度（默认为width）
            
1.2.0
            
        
        

            
destHeight
            
Number
            
否
            
输出图片高度（默认为height）
            
1.2.0
            
        
        

            
canvasId
            
String
            
是
            
画布标识，传入 <canvas/> 的 cavas-id
            

        
        

            
fileType
            
String
            
否
            
目标文件的类型，只支持 "jpg" 或 "png"。默认为 "png"
            
1.7.0
            
        
        

            
quality
            
Number
            
否
            
图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理
            
1.7.0
            
        
        

            
success
            
Function
            
否
            
接口调用成功的回调函数
            

        
        

            
fail
            
Function
            
否
            
接口调用失败的回调函数
            

        
        

            
complete
            
Function
            
否
            
接口调用结束的回调函数（调用成功、失败都会执行）
 



示例代码
wx.canvasToTempFilePath({
  x: 100,
  y: 200,
  width: 50,
  height: 50,
  destWidth: 100,
  destHeight: 100,
  canvasId: "myCanvas",
  success: function(res) {
    console.log(res.tempFilePath)
  } 
})

    
        绘图接口和方法