文档章节

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

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 583
阅读 6
收藏 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
微信小程序开发系列七:微信小程序的页面跳转

微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发...

JerryWang_SAP
10/22
0
0
分享几个微信小程序开发框架和工具

###【小程序开发框架】 1、官方框架MINA 小程序提供的开发框架为MINA框架,它类似于淘宝Weex、Vue框架。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能...

codeGoogle
04/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7+git+github创建Python开发环境

1.准备CentOS7 (1)下载VMware Workstation https://pan.baidu.com/s/1miFU8mk (2)下载CentOS7镜像 https://mirrors.aliyun.com/centos/ (3)安装CentOS7系统 http://blog.51cto.com/fengyuns......

枫叶云
昨天
0
0
利用ibeetl 实现selectpicker 的三级联动

1. js 直接写在html页面上面,ibeetl 就可以动态地利用后台传上来的model List ,不需要每次点击都要ajax请求后台 2. 使用selectpicker 的时候,除了对selecct option的动态处理后,还需要 $("#...

donald121
昨天
1
0
Android SELinux avc dennied权限问题解决方法

1. 概述 SELinux是Google从android 5.0开始,强制引入的一套非常严格的权限管理机制,主要用于增强系统的安全性。 然而,在开发中,我们经常会遇到由于SELinux造成的各种权限不足,即使拥有“...

TreasureWe
昨天
2
0
阿里云ACP认证详细笔记(一)

ECS--------------------------1.云服务器Elastic Compute Service(ECS)2.Terraform:您可以使用开源工具Terraform来预配和管理ECS资源。Terraform提供一种简单机制,能够将配置文件部署...

啃不动地大坚果
昨天
1
0
如何实现MetaMask签名授权后DAPP一键登录功能?

1 摘要 网站太多,各种用户名/密码实在记不住。所以我们逐渐接受了BAT账号的授权登录功能。在以太坊DAPP应用中,也可以使用MetaMask实现授权后一键登录功能。MetaMask是去中心化钱包,授权信...

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部