微信小程序画布canvas,微信小程序画布属性实例

—— 2017 ——

12/22

00:00

来源：

作者：未知

栏目：小程序开发

2017/12/22 0:00:00 来源：不详作者：未知

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'}

注：

canvas标签默认宽度300px、高度225px
同一页面中的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.createCanvasContext('firstCanvas')

    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()
    context.draw()
  }
})

Bug & Tip

tip:canvas组件是由客户端创建的原生组件，它的层级是最高的。
tip: 请勿在scroll-view中使用canvas组件。
tip:css动画对canvas组件无效。

更多微信小程序开发教程，可以关注。

【本站声明】
1、本站文章中所选用的图片及文字来源于网络以及用户投稿，由于未联系到知识产权人或未发现有关知识产权的登记，如有知识产权人并不愿意我们使用，如果有侵权请立即联系。
2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。

KESION 科汛软件
KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商，长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。
KESION 不断通过技术创新，提供产品和服务，助力企业向数字化转型，通过科技驱动商业革新，让商业变得更智慧！

▼点击进入科汛官网了解更多

热门标签

微信小程序开发微信小程序

上/下篇

微信小程序地图map,控制小程序地图控件

微信小程序map 地图。属性名类型默认值说明最低版本 longitude Number 中心经度 latitude Number 中心纬度 scale Number 16 缩放级别，取值范围

微信小程序开发微信小程序 2017/12/22 0:00:00
微信小程序API网络,微信小程序设置通讯域名

每个微信小程序需要事先设置一个通讯域名，小程序可以跟指定的域名与进行网络通信。包括普通 HTTPS 请求（wx.request）、 WebSocket 通信（wx.connectSocket）、上传文

微信小程序开发微信小程序 2017/12/22 0:00:00