- 需求的场景描述(希望解决的问题)
为什么竖线没有画在横线上面,而是把横线给清空了,重新画了一根竖线?
- 希望提供的能力 我希望点击按钮后能把竖线画在横线上面,也就是画布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 > |
如果既想画横线,又想画竖线。可以先画横线,再画竖线,然后只需要调用一次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();
fangkuai.draw(true);
为什么没有人回答啊嗷嗷嗷。。。