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;
}
