微信小程序提示wx.createCanvasContext方法已废弃的解决方案

Posted 2023-03-23 TA远方

在微信开发工具上，打开小程序项目后，可能有遇到这么一个问题

使用wx.createCanvasContext 会提示此方法，基础库版本 2.9.0 起已废弃，请使用 Canvas 替换

💡 如何解决?

• 方法1，改成使用旧的基础库可能有性能问题，此项忽略;
• 方法2，手动查找替换代码，会发现要改动的地方可多了，此项忽略
• 方法3，手动改动次数最小，不知道有没有

有的，下面笔者TA远方提供以下源代码，请仔细看

'use strict';

export default class CanvasContext 

  constructor(res)
    const  width, height, node  = res;
    
    this.ctx = node.getContext('2d');
    this.ctx.canvas.width = width;
    this.ctx.canvas.height = height;

    this.taskList = [];
    this.addTask = (fun) => this.taskList.push(fun);
  

  fillRect(x,y,w,h)
    this.addTask(() => this.ctx.fillRect(x,y,w,h));
  
  
  stroke()
    this.addTask(() => this.ctx.stroke());
  

  fill()
    this.addTask(() => this.ctx.fill());
  

  setFillStyle(color)
    this.addTask(() => this.ctx.fillStyle = color);
  

  setStrokeStyle(color)
    this.addTask(() => this.ctx.strokeStyle = color);
  

  beginPath()
    this.addTask(() => this.ctx.beginPath());
  

  moveTo(x,y)
    this.addTask(() => this.ctx.moveTo(x,y));
  

  lineTo(x,y)
    this.addTask(() => this.ctx.lineTo(x,y));
  

  setTextAlign(value)
    this.addTask(() => this.ctx.textAlign = value);
  

  setTextBaseline(value)
    this.addTask(() => this.ctx.textBaseline = value);
  

  setFontSize(value)
    this.addTask(() => this.ctx.font = value + "px sans-serif");
  

  arc(x,y,radius,startAngle,endAngle)
    this.addTask(() => this.ctx.arc(x,y,radius,startAngle,endAngle));
  

  fillText(text,x,y,maxWidth)
    this.addTask(() => this.ctx.fillText(text,x,y,maxWidth));
  

  bezierCurveTo(cp1x,cp1y,cp2x,cp2y,cp3x,cp4y)
    this.addTask(() => this.ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,cp3x,cp4y));
  

  draw(noClear,success)
    if (!noClear) 
      let canvas = this.ctx.canvas;
      this.ctx.clearRect(0,0,canvas.width,canvas.height);
    
    this.taskList.forEach(t => t());
    this.taskList.length = 0;
    if (typeof success == 'function') success();
  

  setShadow(offsetX,offsetY,blur,color)
    this.addTask(() => 
      if (offsetX!=undefined) this.ctx.shadowOffsetX = offsetX;
      if (offsetY!=undefined) this.ctx.shadowOffsetX = offsetY;
      if (blur!=undefined) this.ctx.shadowBlur = blur;
      if (color!=undefined) this.ctx.shadowColor = color;
    );
  

  clearRect(x,y,w,h)
    this.addTask(() => this.ctx.clearRect(x,y,w,h));
  

	//更多调用方法...

将上面的代码复制粘贴到一个新建的文件canvas_context.js中，然后，在调用的地方去新建CanvasContext对象类实例，这样就可以像往常一样使用，代码如下，其中的canvA,canvB,canvB使用方式基本不用做多改动

import CanvasContext from '../../utils/canvas_context';

Page(
	onLoad()
		// TODO：会提示 wx.createCanvasContext 方法已弃用
	    // this.data.canvas = 
	    //   canvA: wx.createCanvasContext('canvA'),
	    //   canvB: wx.createCanvasContext('canvB'),
	    //   canvC: wx.createCanvasContext('canvC'),
	    // ;
	
	    wx.createSelectorQuery().select('#canvA').fields( size: true, node: true ,res=>
	      this.data.canvas.width = res.width;
	      this.data.canvas.height = res.height;
	      // TODO：改用 CanvasContext 替换即可，性能不受影响
	      this.data.canvas.canvA = new CanvasContext(res);
	
	      wx.createSelectorQuery().select('#canvB').fields( size: true, node: true ,res=>
	        this.data.canvas.canvB = new CanvasContext(res);
	  
	        wx.createSelectorQuery().select('#canvC').fields( size: true, node: true ,res=>
	          this.data.canvas.canvC = new CanvasContext(res);
	    
	          this.reset()
	        ).exec()
	      ).exec()
	    ).exec()
	
)

还有需要注意，在布局文件中，组件canvas添加新的属性id="",type="2d", 示例如下

<view class="page">
		<view class="canvas-box">
			<canvas class="canvas" canvas-id="canvA" id="canvA" type="2d"></canvas>
			<canvas class="canvas" canvas-id="canvB" id="canvB" type="2d"></canvas>
			<canvas class="canvas" canvas-id="canvC" id="canvC" type="2d" bindtouchstart="onTouch"></canvas>
		</view>
		<!-- ... -->
</view>