微信小程序 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 相关文章推荐
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
javascript面向对象编程代码
Dec 19 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
JS解析XML实例分析
2015/01/30 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
使用python实现rsa算法代码
2016/02/17 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
pandas数据拼接的实现示例
2020/04/16 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
银行实习生自我鉴定范文
2013/09/19 职场文书
管理学专业个人求职信范文
2013/12/13 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
小学数学教师研修日志
2015/11/13 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
Python Numpy之linspace用法说明
2021/04/17 Python
Win10系统下配置Java环境变量
2021/06/13 Java/Android