首页 > PHP资讯 > 工具库 > 图文详解微信小程序canvasAPI实例代码

图文详解微信小程序canvasAPI实例代码

工具库
这篇文章主要介绍了微信小程序 canvas API详解及实例代码的相关资料,需要的朋友可以参考下

绘图中可以进行变形,绘制,路径,样式,这些个东西有点多官网有例子,这里通过一个例子引入

wxml

js

Page({ data:{  text:"Page canvas" }, onLoad:function(options){  // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){  // 页面渲染完成  //第一步创建个上下文容器  var context = wx.createContext();  //第二步绘制这里我们绘制个矩形   //x, y, widht, height  context.rect(50, 50, 100, 100);  //绘制的样式进行描边绘制,fill为填充位置  context.stroke();  /**   * 调用wx.drawCanvas,通过canvasId指定在哪张画布上绘制,通过actions指定绘制行为   *    *  注意convasId可以为数字表示也可以用字符串表示,就是一个绘制对象的标识,并且可以指定多个   *  actions 是从context上下文中获取的绘制行为,即为第二步操作   */  wx.drawCanvas({   //画布标识,传入的cavas-id   canvasId: 'identify',   //获取绘制行为, 就相当于你想做到菜context.getActions()就是食材   actions: context.getActions(),  }) }, onShow:function(){  // 页面显示 }, onHide:function(){  // 页面隐藏 }, onUnload:function(){  // 页面关闭 }})


感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

以上就是图文详解微信小程序canvas API实例代码的详细内容,更多请关注 第一PHP社区 其它相关文章!

工具库

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持4不支持0