微信小程序画布使用范例详解
2016-12-13 13:21
821 查看
今天关于微信小程序的画布,做了个简单的范例,大家来看看吧
wxml的代码
js代码
这个对小程序的小白来说,也是很简单的,接下来给大家发效果图吧!
点击后的效果图(可以重复 无限次数的点击哦)
若有不懂的地方,可以在下方评论,也可以扫描下方二维码进行讨论
wxml的代码
<canvas style="width: 300px; height: 200px;" canvas-id="fourCanvas" bindtouchstart="start" bindtap="click" >画布效果</canvas>
js代码
Page({ data:{ canvaid:'fourCanvas', num:'1' }, canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg) }, click:function(){ var nums=this.data.num; nums++; if(nums%2==0){ 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() }else{ 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, 103) context.arc(100, 100, 60, 0, 2 * Math.PI, true) context.moveTo(59, 137) context.arc(100, 135, 40, 3.2, Math.PI, false) context.moveTo(84, 83) context.arc(80, 80, 5, 0, 2 * Math.PI, true) context.moveTo(124, 79) context.arc(120, 80, 5, 0, 2 * Math.PI, true) context.stroke() } wx.drawCa a4d5 nvas({ canvasId: this.data.canvaid, actions: context.getActions() }) this.setData({ num:nums }) }, onReady: function (e) { 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, 103) context.arc(100, 100, 60, 0, 2 * Math.PI, true) context.moveTo(59, 137) context.arc(100, 135, 40, 3.2, Math.PI, false) context.moveTo(84, 83) context.arc(80, 80, 5, 0, 2 * Math.PI, true) context.moveTo(124, 79) context.arc(120, 80, 5, 0, 2 * Math.PI, true) context.stroke() wx.drawCanvas({ canvasId: this.data.canvaid, actions: context.getActions() }) } })
这个对小程序的小白来说,也是很简单的,接下来给大家发效果图吧!
点击后的效果图(可以重复 无限次数的点击哦)
若有不懂的地方,可以在下方评论,也可以扫描下方二维码进行讨论
相关文章推荐
- 微信小程序例子——使用画布组件绘制一条长度为230px的水平直线
- 微信小程序例子——使用画布组件绘制一个带阴影及下划线的文字
- 微信小程序―微信跳一跳,Android游戏助手(外挂)使用教程详解
- 微信小程序 安全包括(框架、功能模块、账户使用)详解
- 微信小程序icon组件使用详解
- 微信小程序例子——使用画布组件绘制一个会自动缩放的正方体
- 微信小程序使用第三方库Immutable.js实例详解
- 微信小程序模板(template)使用详解
- 微信小程序 使用腾讯地图SDK详解及实现步骤
- 微信小程序slider组件使用详解
- 微信小程序例子——使用画布组件绘制一个半径为50px的圆
- 微信小程序_小球弹啊弹(画布的简单使用)
- 微信小程序开发详解(二)---开发工具使用简介
- 微信小程序中使用Promise进行异步流程处理的实例详解
- 微信小程序使用第三方库Underscore.js步骤详解
- 微信小程序开发详解(四)---微信小程序开发组件使用初步
- 微信小程序 setData的使用方法详解
- 微信小程序的工具使用以及目录结构详解
- 微信小程序button组件使用详解
- 微信小程序switch组件使用详解