canvas_14 绘制文本

<template>
    <view class="zcvs">

        <view class="zcvs-item">
            <view>Canvas_绘制文本</view>
            <view>
                <canvas canvas-id="cvs" id="cvs" style=" 400px; height: 400px;border: 1px solid #007AFF;" />
            </view>

        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                txt: [
                    "文：芦苇",
                    "",
                    "你喜欢我笑的样子",
                    "我靠上了落寞的窗子",
                    "晚风吹起了我的袖子",
                    "明月沾湿了你的眸子",
                    "",
                    "转身，你走出了两个人的圈子",
                    "树影婆娑，整座院子",
                    "",
                    "挽起袖子",
                    "回头，把揽你忧伤一地的影子",
                    "装进，青春，这纸盒子",
                ]
            };
        },
        onReady() {
            this.drawCvs();
        },
        methods: {
            drawCvs() {
                const ctx = uni.createCanvasContext('cvs');
                ctx.setStrokeStyle("#bf3e49");
                ctx.setFillStyle("#bf3e49");
                ctx.setLineWidth(3);

                let imgSrc ="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-49a6825e-bb38-4ae0-9c06-c57cf4d158d5/c909225a-4b0e-4843-948a-fba9a467c8b2.gif";
                ctx.drawImage(imgSrc, 0, 0, 400, 400);

                ctx.font = "bold 16px cursive";
                ctx.setTextAlign("start");
                ctx.setTextBaseline("middle");
                let txtHeight = 17;

                ctx.strokeText("青春纸盒子", 110, 110);

                let i = -1;
                let timer = setInterval(() => {
                    i += 1;
                    ctx.fillText(this.txt[i], 50, 140 + i * txtHeight);
                    ctx.draw(true);
                }, 500)

                setTimeout(() => {
                    clearInterval(timer);
                    console.log(ctx.measureText("我是中国人").width);
                }, 6500)
            },
        }
    }
</script>

<style lang="scss" scoped></style>