绘图是每个移动应用必备的技术,基本上和Android,IOS,等移动开发都是相同的,创建个上下文,给你个画布再上画,官网给的小例子都比较全了自己去看吧,drawImage时没有反应不知道是BUG还是电脑不能测试待定,
屏幕就像是数学上的坐标轴,且在第四象限,以屏幕左上角为圆点,X轴向右为正向左为负,Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基本用法
微信小程序这里提供了两个API
wx.createContext() 创建并返回绘图上下文context对象
getActions 获取当前context上存储的绘图动作,对应wx.drawCanvas(object)中的actions clearActions 清空当前的存储绘图动作
wx.drawCanvas(object) 绘制
canvasId 画布标识,传入的cavas-id,这里的标识可以为Number,也可以是String actions 绘图动作数组,由wx.createContext创建的context,调用getActions方法导出绘图动作数组。
绘图中可以进行变形,绘制,路径,样式,这些个东西有点多官网有例子,这里通过一个例子引入
//第二步绘制这里我们绘制个矩形 wx.drawCanvas({ },onShow:function(){ 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
//x,y,widht,height
context.rect(50,50,100,100);
//绘制的样式进行描边绘制,fill为填充位置
context.stroke();
/**
*/
//画布标识,传入的cavas-id
canvasId: 'identify',//获取绘制行为, 就相当于你想做到菜context.getActions()就是食材
actions: context.getActions(),})
// 页面显示
},onHide:function(){
// 页面隐藏
},onUnload:function(){
// 页面关闭
}
})