联系我们 - 广告服务
您的当前位置:主页 > 布局 > 开发 >

画布组件

来源:未知 编辑:admin 时间:2018-01-19
导读: canvas/主要用于绘制图形,在页面上放置一个canvas/,就相当于在页面放置了一块画布,可以在其中进行图形绘制。canvas/组件是一块无色透明区域,本身并没有绘制能力,它仅仅是图形容器,需要调用相关API来完成实际的绘图任务,本章主要讲解canvas/组件,相关
  <canvas/>主要用于绘制图形,在页面上放置一个<canvas/>,就相当于在页面放置了一块“画布”,可以在其中进行图形绘制。<canvas/>组件是一块无色透明区域,本身并没有绘制能力,它仅仅是图形容器,需要调用相关API来完成实际的绘图任务,本章主要讲解<canvas/>组件,相关API在后续章节中讲解。<canvas/>组件默认宽度300px,高度225px,同一页面中的canvas-id不能重复,如果使用一个已经出现过的canvas-id,该<canvas/>组件对应的画布将被隐藏并不再正常工作,需要注意的是请勿在<scroll-view/>中使用<canvas/>。其属性如下:
·canvas-id:canvas组件的唯一标识符。·disable-scroll:当在canvas中移动时,禁止屏幕滚动以及下拉刷新,默认为false。·bindtouchstart:手指触摸动作开始。·bindtouchmove:手指触摸后移动。·bindtouchend:手指触摸动作结束。·bindtouchcancel:手指触摸动作被打断,如来电提醒、弹窗。·bindlongtaop:手指长按500ms之后触发,触发了长按事件后进行移动不会触发屏幕的滚动。·binderror:当发生错误时触发error事件,detail={errMsg:'something wrong'}。
canvas组件本身没有太多展示的点,这里我们简单结合API为大家初步演示canvas绘图能力,具体绘图API参考后面章节,示例如图所示。

代码如下:
<canvas canvas-id="myCanvas" style="
width : 100%;height : 300px;"></canvas>   Page( {   onReady : function() {     // 获取绘图上下文     var context = wx.createContext();     context.setStrokeStyle( "#0000ff" ); // 设置线条样式       context.setLineWidth( 5 ); // 设置线条宽度       context.rect(3, 2, 150, 200); // 添加一个矩阵       context.stroke(); // 对当前路径进行描边       // 绘制图像       wx.drawCanvas( {         canvasId : 'myCanvas',         actions : context.getActions()       } );       console.log( 'asdf' );} } );

责任编辑:admin

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

上一篇:地图组件
下一篇:客服会话

网友评论:

在“\templets\demo\comments.htm”原来的内容全部删除,插入第三方评论代码,如果不需要评论功能,删除comments.html里面的内容即可
推荐使用友言、多说、畅言(需备案后使用)等社会化评论插件

Copyright © Tricks资讯网 版权所有
本站所有资讯来源于网络 如有侵权请联系QQ:940910888 技术支持鹏博科技
Top