1.绘制换行文字

drawText: function(context, text, x, y, width) {

    let that = this;

    console.log(x);

    console.log(y);

    var chr = text.split(""); //这个方法是将一个字符串分割成字符串数组

    var temp = "";

    var row = [];

    context.setFontSize(that.data.ratio * 26)

    context.setFillStyle("#000")

    console.log(chr);

    for (var a = 0; a < chr.length; a++) {

      let ww = context.measureText(temp).width;

      if (ww < width) {

        temp += chr[a];

      } else {

        a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比

        row.push(temp);

        temp = "";

      }

    }

    row.push(temp);

    for (var b = 0; b < row.length; b++) {

      context.fillText(row[b], x, y + b * that.data.ratio * 42, width);

    }

  }

2.隐藏canvas

原生组件的使用限制

由于原生组件脱离在 WebView 渲染流程外，因此在使用时有以下限制：

原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。

后插入的原生组件可以覆盖之前的原生组件。

原生组件还无法在 scroll-view、swiper、picker-view、movable-view 中使用。

部分CSS样式无法应用于原生组件，例如：

无法对原生组件设置 CSS 动画

无法定义原生组件为 position: fixed

不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域

原生组件的事件监听不能使用 bind:eventname 的写法，只支持 bindeventname。原生组件也不支持 catch 和 capture 的事件绑定方式。

在iOS下，原生组件暂时不支持触摸相关事件。

canvas为原生组件，如果需要隐藏，可以定义父级节点 position: fixed，并移出可视区域，例如：

html:

<view class="canvas-area">

    <canvas canvas-id="myCanvas" style="width: 1500rpx;height: 2400rpx;" />

  </view>

css:

.canvas-area {

  height: 0;

  width: 0;

  position: fixed;

  top: -2400rpx;

}