微信小程序把玩(四十一)canvas API

zhichi_admin

绘图是每个移动应用必备的技术，基本上和Android，IOS，等移动开发都是相同的，创建个上下文，给你个画布再上画，官网给的小例子都比较全了自己去看吧，drawImage时没有反应不知道是BUG还是电脑不能测试待定，http://wxopen.notedown.cn/api/api-canvas.html

屏幕就像是数学上的坐标轴，且在第四象限，以屏幕左上角为圆点，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方法导出绘图动作数组。
    
  
  

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

wxml

1. <!--画布
   
2.   canvas-id 为画布标识，当绘制时通过canvas-id找到画布
   
3. -->
   
4. <canvas canvas-id="identify"/>

复制代码

js

1. Page({
   
2.   data:{
   
3.     text:"Page canvas"
   
4.   },
   
5.   onLoad:function(options){
   
6.     // 页面初始化 options为页面跳转所带来的参数
   
7.   },
   
8.   onReady:function(){
   
9.     // 页面渲染完成
   
10.     //第一步创建个上下文容器
    
11.     var context = wx.createContext();
    
12. 
    
13.     //第二步绘制这里我们绘制个矩形
    
14.     //x, y, widht, height
    
15.     context.rect(50, 50, 100, 100);
    
16.     //绘制的样式进行描边绘制，fill为填充位置
    
17.     context.stroke();
    
18.     /**
    
19.      *  调用wx.drawCanvas，通过canvasId指定在哪张画布上绘制，通过actions指定绘制行为
    
20.      *
    
21.      *    注意convasId可以为数字表示也可以用字符串表示，就是一个绘制对象的标识，并且可以指定多个
    
22.      *    actions 是从context上下文中获取的绘制行为，即为第二步操作
    
23.      */
    
24. 
    
25.     wx.drawCanvas({
    
26.       //画布标识，传入<canvas/>的cavas-id
    
27.       canvasId: 'identify',
    
28.       //获取绘制行为， 就相当于你想做到菜context.getActions()就是食材
    
29.       actions: context.getActions(),
    
30.     })
    
31. 
    
32. 
    
33.   },
    
34.   onShow:function(){
    
35.     // 页面显示
    
36.   },
    
37.   onHide:function(){
    
38.     // 页面隐藏
    
39.   },
    
40.   onUnload:function(){
    
41.     // 页面关闭
    
42.   }
    
43. })

复制代码

jackjack417

我有流量，你有产品，我们就可以合作，有意的个人开发者朋友可以联系微信号jim20180688，详聊