微信小程序 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 相关文章推荐
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
关于js datetime的那点事
Nov 15 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
vue+moment实现倒计时效果
Aug 26 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
php数组去重实例及分析
2013/11/26 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python fileinput模块使用实例
2015/06/03 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
Python 硬币兑换问题
2019/07/29 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
初入社会应届生求职信
2013/11/18 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
委托公证书格式
2015/01/26 职场文书
员工家属慰问信
2015/03/24 职场文书
未中标通知书
2015/04/17 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android