微信小程序 wxapp画布 canvas详细介绍


Posted in Javascript onOctober 31, 2016

微信小程序 wxapp画布 canvas :最近学习微信小程序的知识,这里记录下小程序 waxpp画布canvas 的知识:

canvas

属性名 类型 默认值 说明
hidden Boolean false 设置画布的显示/隐藏,hidden值为true表示隐藏,值为false表示显示
canvas-id String   canvas组件的唯一标识符
binderror EventHandle   当发生错误时触发error事件,detail = { errMsg: 'something wrong' }

注:

1.canvas标签默认宽度300px、高度225px

2.同一页面中的canvas-id不可重复,如果使用一个已经出现过的canvas-id,该canvas标签对应的画布将被隐藏并不再正常工作

示例代码:下载

<!-- canvas.wxml -->
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
<!-- 当使用绝对定位时,文档流后边的canvas的显示层级高于前边的canvas-->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas>
<!-- 因为canvas-id与前一个canvas重复,该canvas不会显示,并会发送一个错误事件到AppService -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas>
// canvas.js
Page({
 canvasIdErrorCallback: function (e) {
  console.error(e.detail.errMsg);
 },
 onReady: function (e) {

  //使用wx.createContext获取绘图上下文context
  var context = wx.createContext();

  context.setStrokeStyle("#00ff00");
  context.setLineWidth(5);
  context.rect(0,0,200,200);
  context.stroke()
  context.setStrokeStyle ("#ff0000") ;
  context.setLineWidth (2)
  context.moveTo(160,100)
  context.arc(100,100,60,0,2*Math.PI,true);
  context.moveTo(140,100);
  context.arc(100,100,40,0,Math.PI,false);
  context.moveTo(85,80);
  context.arc(80,80,5,0,2*Math.PI,true);
  context.moveTo(125,80);
  context.arc(120,80,5,0,2*Math.PI,true);
  context.stroke();

  //调用wx.drawCanvas,通过canvasId指定在哪张画布上绘制,通过actions指定绘制行为
  wx.drawCanvas({
   canvasId: 'firstCanvas',
   actions: context.getActions() //获取绘图动作数组
  });
 }
});

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

Javascript 相关文章推荐
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
关于js类的定义
Jun 28 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 #Javascript
详解JavaScript跨域总结与解决办法
Oct 31 #Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 #Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 #Javascript
JavaScript事件用法浅析
Oct 31 #Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 #Javascript
JavaScript递归操作实例浅析
Oct 31 #Javascript
You might like
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
PHP数组操作类实例
2015/07/11 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
微信小程序开发探究
2016/12/27 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
微信小程序的生命周期的详解
2017/10/19 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
生产管理的三大手法
2013/11/11 职场文书
《学会待客》教学反思
2014/02/22 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
服务承诺书范文
2014/05/19 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
vue3中的组件间通信
2021/03/31 Vue.js