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

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

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: &＃39;identify&＃39;,
   //获取绘制行为， 就相当于你想做到菜context.getActions()就是食材
   actions: context.getActions(),
  })


 },
 onShow:function(){
  // 页面显示
 },
 onHide:function(){
  // 页面隐藏
 },
 onUnload:function(){
  // 页面关闭
 }
})

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

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