收藏
回答

如何在同一个canvas上多次绘图

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 需求 canvas 工具 6.6.6 2.0.7

- 需求的场景描述(希望解决的问题)

为什么竖线没有画在横线上面,而是把横线给清空了,重新画了一根竖线?

- 希望提供的能力 我希望点击按钮后能把竖线画在横线上面,也就是画布canvas上既有竖线又有横线,我应该怎么做?

//index.js
//获取应用实例
const fangkuai = wx.createCanvasContext('fangkuai');
 
Page({
    data: {
        width: 300,
    },
    drawcol() {
        fangkuai.beginPath();
        fangkuai.moveTo(150, 0);
        fangkuai.lineTo(150, this.data.width);
        fangkuai.closePath();
        fangkuai.stroke();
        fangkuai.draw();
    },
    onReady: function () {
        fangkuai.beginPath();
        fangkuai.moveTo(0, 150);
        fangkuai.lineTo(this.data.width, 150);
        fangkuai.closePath();
        fangkuai.stroke();
        fangkuai.draw();
    }
})
<!--index.wxml-->
<canvas canvas-id='fangkuai' style='width:{{ width }}px; height:{{ width }}px;border: 2rpx solid;'></canvas>
<button bindtap='drawcol'>画竖线</button>



最后一次编辑于  2018-05-18
回答关注问题邀请回答
收藏

3 个回答

  • 已注销
    已注销
    2018-06-11

    如果既想画横线,又想画竖线。可以先画横线,再画竖线,然后只需要调用一次draw()就可以了

            fangkuai.moveTo(150, 0);
            fangkuai.lineTo(150, this.data.width);
            fangkuai.closePath();
            fangkuai.stroke();
            fangkuai.beginPath();
            fangkuai.moveTo(0, 150);
            fangkuai.lineTo(this.data.width, 150);
            fangkuai.closePath();
            fangkuai.stroke();
            fangkuai.draw();


    2018-06-11
    赞同 1
    回复
  • | ⃢👁 👁⃢ |
    | ⃢👁 👁⃢ |
    2018-05-21

    fangkuai.draw(true);

    2018-05-21
    赞同
    回复
  • 江湖路远
    江湖路远
    2018-05-20

    为什么没有人回答啊嗷嗷嗷。。。

    2018-05-20
    赞同
    回复