canvas

从 2.0.7 版本开始支持

画布。获取实例相关api：createSelectorQuery

效果展示

示例代码

方法一

WXML

<view class="page">
    <view class="page__hd">
        <text class="page__title">canvas</text>
        <text class="page__desc">画布</text>
    </view>
    <view class="page__bd">
        <canvas id="myCanvas" type="2d"></canvas>
    </view>
</view>

JS

Page({
  onReady() {
    const query = wx.createSelectorQuery();
    query.select('#myCanvas')
        .node()
        .exec((res) => {
            if (res[0] && res[0].node) {
                const canvas = res[0].node;
                const ctx = canvas.getContext('2d');
                ctx.strokeStyle = "#00ff00";
                ctx.lineWidth = 5;
                ctx.rect(0, 0, 200, 200);
                ctx.stroke();
                ctx.strokeStyle = "#ff0000";
                ctx.lineWidth = 2;
                ctx.moveTo(160, 100);
                ctx.arc(100, 100, 60, 0, 2 * Math.PI, true);
                ctx.moveTo(140, 100);
                ctx.arc(100, 100, 40, 0, Math.PI, false);
                ctx.moveTo(85, 80);
                ctx.arc(80, 80, 5, 0, 2 * Math.PI, true);
                ctx.moveTo(125, 80);
                ctx.arc(120, 80, 5, 0, 2 * Math.PI, true);
                ctx.stroke();
            }
      });
  }
})

API

属性	类型	默认值	必填	说明
type	string		是	指定 canvas 类型，仅支持 2d，必须配置该属性才能使用createSelectorQuery获取实例

多平台支持

属性	平台支持
canvas-id	支付宝

注释：

1.支付宝仅支持创建画布显示canvas，不支持fields方式
2.canvas 标签默认宽度300px、高度150px
3.iOS 上使用 canvas 组件，且其上级元素设置 css 为 overflow-x: hidden 会导致滑动异常，请避免使用该属性或使用 css 的 overflow 属性代替
4.目前在 iOS 10 版本上的echarts图表库不支持交互，iOS 10 以下版本不支持该组件