canvas

画布。

效果展示

示例代码

方法一

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 style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
    </view>
</view>

JS

Page({
    onReady() {
        this.drawCanvas()
    },
    drawCanvas() {
        // 使用 wx.createContext 获取绘图上下文 context
        var context = wx.createCanvasContext('firstCanvas')

        context.setStrokeStyle("#00ff00")
        context.setLineWidth(5)
        context.rect(0, 0, 200, 200)
        context.stroke()
        context.setStrokeStyle("#ff0000")
        context.setLineWidth(2)
        context.moveTo(160, 100)
        context.arc(100, 100, 60, 0, 2 * Math.PI, true)
        context.moveTo(140, 100)
        context.arc(100, 100, 40, 0, Math.PI, false)
        context.moveTo(85, 80)
        context.arc(80, 80, 5, 0, 2 * Math.PI, true)
        context.moveTo(125, 80)
        context.arc(120, 80, 5, 0, 2 * Math.PI, true)
        context.stroke()
        context.draw()
    }
})

方法二

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，用于获取元素尺寸 -->
        <canvas style="width:300px;height:300px" id="canvas" canvas-id="myCanvas"></canvas>
    </view>
</view>

JS

Page({
    onReady() {
        this.drawCanvas()
    },
    drawCanvas() {
        // 使用 wx.createSelectorQuery() 获取 canvas 的尺寸
        const query = wx.createSelectorQuery()
        query.select('#canvas')  //select方法传入canvas元素的id
            .fields({ size: true })
            .exec((res) => {
                // 从res[0]中获取元素的尺寸
                console.log(res[0].width);
                console.log(res[0].height);
                console.log(res[0].top);
                console.log(res[0].left);
                console.log(res[0].bottom);
                console.log(res[0].right);
                console.log(res[0].x); //与left值相同
                console.log(res[0].y); //与right值相同

                //使用 wx.createContext 获取绘图上下文 context
                var context = wx.createCanvasContext('myCanvas')
                context.setStrokeStyle("#00ff00")
                context.setLineWidth(5)
                context.rect(0, 0, 200, 200)
                context.stroke()
                context.setStrokeStyle("#ff0000")
                context.setLineWidth(2)
                context.moveTo(160, 100)
                context.arc(100, 100, 60, 0, 2 * Math.PI, true)
                context.moveTo(140, 100)
                context.arc(100, 100, 40, 0, Math.PI, false)
                context.moveTo(85, 80)
                context.arc(80, 80, 5, 0, 2 * Math.PI, true)
                context.moveTo(125, 80)
                context.arc(120, 80, 5, 0, 2 * Math.PI, true)
                context.stroke()
                context.draw()
            })
    }
})

API

属性	类型	默认值	必填	说明
canvas-id	string		否	canvas 组件的唯一标识符

多平台支持

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

注释：

1.支付宝仅支持创建画布显示canvas，不支持fields方式