微信小程序 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 相关文章推荐
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 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&amp;java(三)
2006/10/09 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
js活用事件触发对象动作
2008/08/10 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
Express系列之multer上传的使用
2017/10/27 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
Python中join和split用法实例
2015/04/14 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
Python中str.join()简单用法示例
2018/03/20 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
如何用Django处理gzip数据流
2021/01/29 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
简历中自我评价怎么写
2014/02/12 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
商品陈列协议书
2014/09/29 职场文书
投资入股合作协议书
2014/10/28 职场文书
幸福来敲门观后感
2015/06/04 职场文书
开业庆典致辞
2015/08/01 职场文书