微信小程序 canvas API详解及实例代码


Posted in Javascript onOctober 08, 2016

微信小程序 canvas API详解及实例代码

绘图是每个移动应用必备的技术,基本上和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

<!--画布
 canvas-id 为画布标识,当绘制时通过canvas-id找到画布
-->
<canvas canvas-id="identify"/>

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({
   //画布标识,传入<canvas/>的cavas-id
   canvasId: 'identify',
   //获取绘制行为, 就相当于你想做到菜context.getActions()就是食材
   actions: context.getActions(),
  })


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

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

Javascript 相关文章推荐
javascript 页面划词搜索JS
Sep 28 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
vue--vuex详解
Apr 15 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
微信小程序 animation API详解及实例代码
Oct 08 #Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 #Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 #Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 #Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 #Javascript
Javascript单例模式的介绍和实例
Oct 08 #Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 #Javascript
You might like
5.PHP的其他功能
2006/10/09 PHP
什么是MVC,好东西啊
2007/05/03 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python fileinput模块使用介绍
2014/11/30 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
python多线程同步之文件读写控制
2021/02/25 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
优秀民警事迹材料
2014/01/29 职场文书
高三自我评价
2014/02/01 职场文书
森林防火工作方案
2014/02/14 职场文书
物业总经理岗位职责
2014/02/28 职场文书
创意广告词
2014/03/17 职场文书
学习雷锋倡议书
2014/04/15 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript