相关平台

微信小程序

小程序基础库: 2.33.0
使用框架: React

复现步骤

创建一个微信小程序，在页面中创建画布实例
wxml代码如下：

<view class="api-page">
    <view class="canvas-main">
      <canvas canvas-id="myCanvas" class="canvas"></canvas>
    </view>
  <button bindtap="drawSomething">作画</button>
  <button bindtap="transform">变换</button>
  <button bindtap="setTransform">设置变换</button>
</view>

wxss代码如下：

.canvas-main {
  width: 50%;
  height: 300rpx;
  border: #000 solid 4rpx;
  margin: 20rpx auto;
  padding: 10rpx;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 600rpx;
}
.canvas {
  width: 360rpx;
  height: 300rpx;
  margin: 10rpx;
}

js代码如下：

Page({
  data: {
    canvas: null,
  },
  drawSomething (e) {
    const canvas = wx.createCanvasContext('myCanvas');
    canvas.beginPath();
    canvas.moveTo(10, 10);
    canvas.lineTo(10, 60);
    canvas.lineTo(60, 35);
    canvas.lineTo(10, 10);
    canvas.stroke();
    canvas.draw(true);
    this.setData({
      canvas,
    })
  },
  transform (e) {
    const {canvas} = this.data;
    canvas.beginPath();
    canvas.moveTo(10, 10);
    canvas.lineTo(10, 60);
    canvas.lineTo(60, 35);
    canvas.lineTo(10, 10);
    canvas.transform(0.8, 0.1, 0.2, 0.9, 10, 20);
    canvas.stroke();
    canvas.draw(true);
  },
  setTransform (e) {
    const {canvas} = this.data;
    canvas.beginPath();
    canvas.moveTo(10, 10);
    canvas.lineTo(10, 60);
    canvas.lineTo(60, 35);
    canvas.lineTo(10, 10);
    canvas.setTransform(1.2, 0.2, 0.2, 0.9, 10, 20);
    canvas.stroke();
    canvas.draw(true);
  },
})

页面正常呈现后，依次触发 作画 ， 变换 ， 设置变换 按钮。

然后将微信小程序工程反向转换到taro工程，并运行在h5上，查看transform与setTransform参数顺序不一致导致画布呈现不同

期望结果

微信小程序画布运行结果与taro画布运行结果一致。

实际结果

微信小程序画布运行结果与taro画布运行结果不一致。

环境信息

Taro v3.6.15

  Taro CLI 3.6.15 environment info:
    System:
      OS: Windows 10 10.0.19045
    Binaries:
      Node: 18.16.1 - D:\nvm\nodejs\node.EXE
      Yarn: 1.22.19 - D:\nvm\nodejs\yarn.CMD
      npm: 9.5.1 - D:\nvm\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: 3.6.15 => 3.6.15
      @tarojs/components: 3.6.15 => 3.6.15
      @tarojs/helper: 3.6.15 => 3.6.15
      @tarojs/plugin-framework-react: 3.6.15 => 3.6.15
      @tarojs/plugin-platform-alipay: 3.6.15 => 3.6.15
      @tarojs/plugin-platform-h5: 3.6.15 => 3.6.15
      @tarojs/plugin-platform-jd: 3.6.15 => 3.6.15
      @tarojs/plugin-platform-qq: 3.6.15 => 3.6.15
      @tarojs/plugin-platform-swan: 3.6.15 => 3.6.15
      @tarojs/plugin-platform-tt: 3.6.15 => 3.6.15
      @tarojs/plugin-platform-weapp: 3.6.15 => 3.6.15
      @tarojs/react: 3.6.15 => 3.6.15
      @tarojs/runtime: 3.6.15 => 3.6.15
      @tarojs/shared: 3.6.15 => 3.6.15
      @tarojs/taro: 3.6.15 => 3.6.15
      @tarojs/taro-loader: 3.6.15 => 3.6.15
      @tarojs/webpack5-runner: 3.6.15 => 3.6.15
      @tarojs/with-weapp: ^3.6.15 => 3.6.15
      babel-preset-taro: 3.6.15 => 3.6.15
      eslint-config-taro: 3.6.15 => 3.6.15
      react: ^18.0.0 => 18.0.0