找回密码
 立即注册

扫一扫,访问微社区

查看: 5218|回复: 1

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

[复制链接]

910

主题

1190

回帖

3万

金钱

管理员

论坛管理员

积分
0

突出贡献优秀版主荣誉管理论坛元老

QQ
发表于 2016-11-21 11:22:29 | 显示全部楼层 |阅读模式

绘图是每个移动应用必备的技术,基本上和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.     //x, y, widht, height
  14.     context.rect(50, 50, 100, 100);
  15.     //绘制的样式进行描边绘制,fill为填充位置
  16.     context.stroke();
  17.     /**
  18.      *  调用wx.drawCanvas,通过canvasId指定在哪张画布上绘制,通过actions指定绘制行为
  19.      *
  20.      *    注意convasId可以为数字表示也可以用字符串表示,就是一个绘制对象的标识,并且可以指定多个
  21.      *    actions 是从context上下文中获取的绘制行为,即为第二步操作
  22.      */

  23.     wx.drawCanvas({
  24.       //画布标识,传入<canvas/>的cavas-id
  25.       canvasId: 'identify',
  26.       //获取绘制行为, 就相当于你想做到菜context.getActions()就是食材
  27.       actions: context.getActions(),
  28.     })


  29.   },
  30.   onShow:function(){
  31.     // 页面显示
  32.   },
  33.   onHide:function(){
  34.     // 页面隐藏
  35.   },
  36.   onUnload:function(){
  37.     // 页面关闭
  38.   }
  39. })
复制代码

0

主题

440

回帖

1052

金钱

新人求带

积分
0
发表于 2020-4-27 10:44:13 | 显示全部楼层
我有流量,你有产品,我们就可以合作,有意的个人开发者朋友可以联系微信号jim20180688,详聊                                                                                               
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1  

GMT+8, 2024-3-29 14:12 , Processed in 0.116160 second(s), 26 queries .

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表