想拿到 canvas画出一张图
但试了好几种方法都不行
————————————
<canvas
id="mycanvas"
canvas-id="mycanvas"
class="myc"
width="400"
height="300"
style="border: 1px solid red;"
></canvas>
11111111 用最常用的DOM方法获取不到
222222222222 注意到提示,想到扩展API,但是报错
333333333333 用Kbone-API调用报错(这个意料之中)
4444444 这个方法能拿到一个 CanvasContext,但没法绘图?!
这个怎么解,那个 canvas.$$prepare 扩展API 是不是为兼容WEB端设计的啊,我只想小程序端先跑通
难道Kbone必须用 canvas.$$prepare才能跑通啊
小程序没dom。
太凉了
document.querySelector('#mycanvas').$$getContext().then(ctx => { console.log(ctx) //绘制 }).catch(e => {console.log(e)})
前人经验
以上方法ok
2.可以换种方法(具体看文档)
--这个$$getContext()不是唯一方法
--还有 binnie smile上面那个图中的$$getNodesRef()
--我觉得canvas.$$prepare很好用
https://wechat-miniprogram.github.io/kbone/docs/domextend/#canvas-prepare
3.我的canvas标签是这么写的(有时候不指定type属性不行)
<canvas
id="mycanvas"
canvas-id="mycanvas"
class="myc"
width="480"
height="640"
style="border: 1px solid red;"
type="2d"
></canvas>
document.querySelector('#mycanvas').$$getContext().then(ctx => {
console.log(ctx)
//绘制
}).catch(e => {console.log(e)})
这段代码,绘图是怎么绘图的?就是将网络图片绘制上去