⼩程序wxapp画布canvas详细介绍
⼩程序 wxapp画布 canvas ：最近学习⼩程序的知识，这⾥记录下⼩程序 waxpp画布canvas 的知识：
canvas
属性名类型默认值说明
hidden Boolean false设置画布的显⽰/隐藏，hidden值为true表⽰隐藏，值为false表⽰显⽰
canvas-id String canvas组件的唯⼀标识符
binderror EventHandle当发⽣错误时触发error事件，detail = { errMsg: 'something wrong' }
注：
1.canvas标签默认宽度300px、⾼度225px
2.同⼀页⾯中的canvas-id不可重复，如果使⽤⼀个已经出现过的canvas-id，该canvas标签对应的画布将被隐藏并不再正常⼯作
⽰例代码：
<!-- canvas.wxml -->
<canvas canvas-id="firstCanvas"></canvas>
<!-- 当使⽤绝对定位时，⽂档流后边的canvas的显⽰层级⾼于前边的canvas-->
<canvas canvas-id="secondCanvas"></canvas>
<!-- 因为canvas-id与前⼀个canvas重复，该canvas不会显⽰，并会发送⼀个错误事件到AppService -->
<canvas canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas>
// canvas.js
Page({
canvasIdErrorCallback: function (e) {
<(Msg);
},
onReady: function (e) {
//使⽤wx.createContext获取绘图上下⽂context
var context = wx.createContext();
context.setStrokeStyle("#00ff00");
context.setLineWidth(5);
<(0,0,200,200);
context.stroke()
context.setStrokeStyle ("#ff0000") ;
context.setLineWidth (2)
context.arc(100,100,60,0,2*Math.PI,true);
context.arc(100,100,40,0,Math.PI,false);
context.arc(80,80,5,0,2*Math.PI,true);
context.arc(120,80,5,0,2*Math.PI,true);
context.stroke();
//调⽤wx.drawCanvas，通过canvasId指定在哪张画布上绘制，通过actions指定绘制⾏为
wx.drawCanvas({
canvasId: 'firstCanvas',
actions: Actions() //获取绘图动作数组
});写文章的小程序
}
});
感谢阅读，希望能帮助到⼤家，谢谢⼤家对本站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。