文档章节

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

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 583
阅读 5
收藏 0

这里写图片描述

绘图是每个移动应用必备的技术,基本上和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(){
    // 页面关闭
  }
})

本文转载自:http://blog.csdn.net/u014360817/article/details/52733027

共有 人打赏支持
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
透笔度/wx-jq

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 查看效果截图: http...

透笔度
01/26
0
0
微信小程序Canvas隐藏问题处理

一、在微信小程序中Canvas控件还存在着许多问题 使用微信自带的Canvas控件,生成海报二维码时,会遇到canvas在绘制结束后,显示在页面的最上层。 使用 hidden或display:none 无效。 解决方案...

tianma3798
09/14
0
0
微信小程序--通过canvas生成图片并保存到本地

前言 需求场景:我们知道,微信小程序可以分享给好友或者微信群,不能分享到朋友圈,那分享到朋友圈就需要特殊处理一下,这里我们把小程序和结合起来使用,生成自定义图片并保存到本地。 代码...

real__隔壁老胖兔
09/17
0
0
wx-jq:一套完全原创的微信小程序插件集合库

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 在线演示: 下载地址...

透笔度
01/25
644
2
跨平台 canvas 绘图框架 - SpriteJS

SpriteJS 是一款由 360 奇舞团开源的跨终端 canvas 绘图库,可以基于 canvas 快速绘制结构化 UI 、动画和交互效果,并发布到任何拥有 canvas 环境的平台上(比如浏览器、小程序和 node )。 ...

welefen
06/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

零拷贝I:用户模式视角

英文原文地址:http://www.linuxjournal.com/article/6345。内容是关于 Zero Copy(零拷贝) 的详细介绍。在RocketMQ的Consumer 消费消息过程,使用了零拷贝技术。作用是即使被频繁调用,文件传...

Jacktanger
4分钟前
1
0
记在k8s的pod上使用apache的commons-net:ftp功能时,ftp一直上传文件失败

在k8s的pod上使用apache的commons-net:ftp功能时,一直显示: 即上传文件失败,但是在本地环境进行上传时却又显示上传成功,让人十分不解。在网上搜索了一下ftp的一些资料发现ftp共有两种模式...

helplove
5分钟前
0
0
Go map实现原理

map数据结构 Golang的map使用哈希表作为底层实现,一个哈希表里可以有多个哈希表节点,也即bucket,而每个bucket就保存了map中的一个或一组键值对。 map数据结构由runtime/map.go/hmap定义:...

恋恋美食
11分钟前
0
0
debian python library re-install

apt-get install python-aptsudo apt-get install python-pkg-resources python-setuptools --reinstall...

关上越
16分钟前
0
0
Elasticsearch地理位置总结

更多内容请参考 : https://www.felayman.com 翻译版本:https://es.xiaoleilu.com/310_Geopoints/00_Intro.html 官方原文:https://www.elastic.co/guide/en/elasticsearch/guide/current/g......

xiaomin0322
17分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部