百度智能小程序 畫(huà)布

canvas 畫(huà)布

解釋：畫(huà)布。畫(huà)布是一個(gè)矩形區(qū)域，開(kāi)發(fā)者可以在頁(yè)面上繪制圖形。canvas 擁有多種繪制路徑、矩形、圖形、字符以及添加圖像的方法。相關(guān) api：swan.createCanvasContext 該組件是客戶端創(chuàng)建的 原生組件，使用時(shí)請(qǐng)注意相關(guān)限制。

屬性說(shuō)明

示例 

在開(kāi)發(fā)者工具中打開(kāi)

<view class="wrap">
    <view class="card-area">
        <canvas 
            class="canvas" 
            canvas-id="myCanvas" 
            disable-scroll="false" 
            bindtouchstart="touchstart"
            bindtouchmove="touchmove"
            bindtouchend="touchend"
            bindtouchcancel="touchcancel"
            bindlongtap="longtap"
            binderror="error">
        </canvas>
    </view>
</view>

Page({
    data: {},
    onUnload() {
        this.interval && clearInterval(this.interval);
    },
    onReady() {
        this.point = {
            x: Math.random() * 305,
            y: Math.random() * 305,
            dx: Math.random() * 10,
            dy: Math.random() * 10,
            r: Math.round(Math.random() * 255 | 0),
            g: Math.round(Math.random() * 255 | 0),
            b: Math.round(Math.random() * 255 | 0)
        };

        this.interval = setInterval(this.draw.bind(this), 17);
        // 使用 swan.createContext 獲取繪圖上下文 context
        this.ctx = swan.createCanvasContext('myCanvas');
    },
    draw() {
        const {ctx} = this;
        ctx.setFillStyle('#FFF');
        ctx.fillRect(0, 0, 610, 610);
        ctx.beginPath();
        ctx.arc(this.point.x, this.point.y, 14, 0, 2 * Math.PI);
        ctx.setFillStyle('rgb(' + this.point.r + ', ' + this.point.g + ', ' + this.point.b + ')');
        ctx.fill();
        ctx.draw();

        this.point.x += this.point.dx;
        this.point.y += this.point.dy;
        if (this.point.x <= 10 || this.point.x >= 305) {
            this.point.dx = -this.point.dx;
            this.point.r = Math.round(Math.random() * 255 | 0);
            this.point.g = Math.round(Math.random() * 255 | 0);
            this.point.b = Math.round(Math.random() * 255 | 0);
        }

        if (this.point.y <= 10 || this.point.y >= 305) {
            this.point.dy = -this.point.dy;
            this.point.r = Math.round(Math.random() * 255 | 0);
            this.point.g = Math.round(Math.random() * 255 | 0);
            this.point.b = Math.round(Math.random() * 255 | 0);
        }
    },
    touchstart(e) {
        console.log('touchstart', e);
    },
    touchmove(e) {
        console.log('touchmove', e);
    },
    touchend(e) {
        console.log('touchend', e);
    },
    touchcancel(e) {
        console.log('touchcancel', e);
    },
    longtap(e) {
        console.log('longtap', e);
    },
    error(e) {
        console.log('error', e.detail.errMsg);
    }
});

.canvas {
    width: 610rpx;
    height: 610rpx;
    background-color: #fff;
    margin-left: .3rem;
}

Bug & Tip

• Tip：canvas 組件不能使用動(dòng)畫(huà)進(jìn)行控制。
• Tip：組件默認(rèn)寬度 300px、高度 225px。
• Tip：基礎(chǔ)庫(kù)版本 1.12.0 開(kāi)始支持事件捕獲、冒泡。

參考示例

參考示例 1: 用 canvas 繪制一個(gè)圓形比例圖

在開(kāi)發(fā)者工具中打開(kāi)

<view class="wrap">
    <view class="circlePostion">
        <canvas class="circle" canvas-id="mycanvas"></canvas>
        <view class="centerText">{{resultComment}}</view>
    </view>
</view>

Page({
    data: {
        timer: ''
    },
    onLoad() {
        let totalItems = 100;
        let rightItems = 80;
        let completePercent = parseInt((rightItems / totalItems) * 100);
        this.getResultComment(completePercent);
        this.showScoreAnimation(rightItems, totalItems);
    },

    showScoreAnimation(rightItems, totalItems) {
        let that = this;
        let copyRightItems = 0;
        that.setData({
            timer: setInterval(function () {
                copyRightItems++;
                if (copyRightItems == rightItems) {
                    clearInterval(that.data.timer)
                } else {
                    // 灰色底層
                    let ctx = swan.createCanvasContext('mycanvas');
                    ctx.setLineWidth(6);
                    ctx.setStrokeStyle('#DCDCDC');
                    ctx.setLineCap('round');
                    ctx.beginPath();
                    ctx.arc(53, 53, 50, 0, 2 * Math.PI, false);
                    ctx.stroke();
                    ctx.setLineWidth(6);
                    ctx.setStrokeStyle('#38f');
                    ctx.setLineCap('round')
                    ctx.beginPath();
                    ctx.arc(53, 53, 50, -Math.PI * 1 / 2, 2 * Math.PI * (copyRightItems / totalItems) - Math.PI * 1 / 2, false);
                    ctx.stroke();
                    ctx.draw();
                }
            }, 20)
        })
    },

  getResultComment(completePercent) {
    let that = this;
    switch (true) {
        case completePercent < 60:
            that.setData({
                resultComment: "不及格"
            })
        break;
        case completePercent >= 60 && completePercent <= 80:
            that.setData({
                resultComment: "中等"
            })
        break;
        case completePercent >= 80 && completePercent < 90:
            that.setData({
                resultComment: "良好"
            })
        break;
        case completePercent >= 90 && completePercent < 100:
            that.setData({
                resultComment: "優(yōu)秀"
            }) 
        }
    },
})