微信小程序 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 相关文章推荐
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
js中日期的加减法
May 06 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
微信小程序 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
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
javascript通过class来获取元素实现代码
2013/02/20 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python原始字符串(raw strings)用法实例
2014/10/13 Python
Python的标准模块包json详解
2017/03/13 Python
Python中常用信号signal类型实例
2018/01/25 Python
python中正则表达式的使用方法
2018/02/25 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
Python中整数的缓存机制讲解
2019/02/16 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
热能动力工程毕业生自荐信
2013/11/07 职场文书
总监职责范文
2013/11/09 职场文书
大专生自我评价
2014/01/28 职场文书
成绩单家长评语大全
2014/04/16 职场文书
庆七一活动总结
2014/08/27 职场文书
小学德育工作总结2015
2015/05/12 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL