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 以下版本不支持该组件