微信小程序 canvas API
2023-09-27 14:29:06 时间
版权声明:本文为博主原创文章,未经博主允许不得转载。
绘图是每个移动应用必备的技术,基本上和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(){
// 页面关闭
}
})
相关文章
- 微信小程序 - radio/checkbox自定义组件
- 微信小程序 - 非Form数据怎么发送到后端?
- 【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
- 【微信小程序】-- 自定义组件总结 (四十)
- 微信小程序 - wx.navigateTo({}) 跳转页面携带 对象/数组/复杂数据 参数(携带一个复杂对象数据参数)
- 微信小程序 - 在自定义组件中请求后端 API 数据接口(引入该组件的页面触发)组件在哪个生命周期钩子函数中请求接口数据呢?
- 微信定位功能结合百度地图获取用户城市
- android的微信签名
- 微信小程序登陆并获取用户信息
- 前端微信小程序云开发基础讲解
- 微信小程序如何调用API实现数据请求-wx.request()
- 微信小程序 功能函数 定时震动
- 微信小程序组件 分页菜单点击请求
- swift实现ios类似微信输入框跟随键盘弹出的效果
- 微信小程序基于swiper组件的tab切换
- 上线两个月,微信小程序给那些用身体支持它的人带来了什么?
- 微信小程序API~用户信息
- 微信小程序封装一个带有图片的Tab栏
- 微信小程序开发BUG经验总结
- 微信小程序下拉刷新/上拉加载更多
- 微信小程序使用flyio封装request请求
- 微信小程序 接口wx.redirectto与wx.navigateTo备忘
- 微信小程序 事件
- 微信小程序企业给零钱打款 提示未配置api发起,请查看产品中心企业付款配置