返回

专注连锁门店会员营销管理系统

线上+线下+进销存+收银+会员
HiShop > Hi小程序 > 小程序开发 > 开发实例 >

微信小程序之画布canvas组件的介绍和基本使用

2018-05-04 作者:秩名

此文章主要是对canvas组件的介绍与基本的使用。在组件中绘画了一条固定的直线。

微信小程序之画布canvas组件的介绍和基本使用

我们先了解一下canvas组件:

wxml:
<canvas binderror="canvasIdErrorCallback" bindtouchend="EventHandle" bindtouchstart="EventHandleStart" canvas-id="myCanvas" class="myCanvas" disable_scroll=""></canvas
注:

canvas 标签默认宽度300px、高度225px同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作disable_scroll属性可以禁止画布在移动时且有手势事件时,禁止屏幕滚动以及下拉刷新

wxss:

.myCanvas{
  border: 1px solid; //给一个边框
}

 

咱们看一下js中是怎么对carvas操作的

//test.js
Page({
  data: {},
  onLoad: function () {},
  onReady:function(){
    var my_carvas = wx.createCanvasContext('myCanvas', this) //1.创建carvas实例对象,方便后续使用。
    my_carvas.setStrokeStyle('red') //设置边框颜色。
    my_carvas.moveTo(20,100)  //设置绘画路线的起点 (20,100)>>>(当前画布对象的 x 轴,当前画布对象的 y 轴)
    my_carvas.lineTo(120, 100)  //增加一个新点,然后创建一条从上次指定点到目标点的线。(120,100)>>>(当前画布对象的 x 轴,当前画布对象的 y 轴)
    my_carvas.stroke()  //画出当前路径的边框。默认颜色色为黑色。
    my_carvas.draw()   //将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。
  }
})
设置起点与终点,绘画一条直线如图:(由左至右100个像素点)

 

canvas标签属性:

画布。

属性名 类型 默认值 说明
canvas-id String   canvas 组件的唯一标识符
disable-scroll Boolean false 当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新
bindtouchstart EventHandle   手指触摸动作开始
bindtouchmove EventHandle   手指触摸后移动
bindtouchend EventHandle   手指触摸动作结束
bindtouchcancel EventHandle   手指触摸动作被打断,如来电提醒,弹窗
bindlongtap EventHandle   手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动
binderror EventHandle   当发生错误时触发 error 事件,detail = {errMsg: 'something wrong'}

注意事项:Bug & Tip

tip:canvas组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。tip: 请勿在scroll-view、swiper、picker-view、movable-view中使用canvas组件。tip:css动画对canvas组件无效。bug: 避免设置过大的宽高,在安卓下会有crash的问题

线上+线下+进销存+收银+会员门店零售管理好帮手

  • 极速收银管理

    门店能实现快速收银,提升门店经营效率。

  • 进销存管理

    系统自带进销存管理,更好管理库存销售。

  • 软硬件一体化

    配备收银硬件一站式整体服务。

收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款

获取报价
【本站声明】

1、本网站发布的该篇文章,目的在于分享电商知识及传递、交流相关电商信息,以便您学习或了解电商知识,请您不要用于其他用途;
2、该篇文章中所涉及的商标、标识的商品/服务并非来源于本网站,更非本网站提供,与本网站无关,系他人的商品或服务,本网站对于该类商标、标识不拥有任何权利;
3、本网站不对该篇文章中所涉及的商标、标识的商品/服务作任何明示或暗示的保证或担保;
4、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。

推荐文章

门店系统 获取报价 立即咨询 免费试用