微信小程序画布使用范例详解
来源:互联网 发布:淘宝网歌莉娅秋装 编辑:程序博客网 时间:2024/05/13 06:58
今天关于微信小程序的画布,做了个简单的范例,大家来看看吧
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.drawCanvas({ 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() }) }})
这个对小程序的小白来说,也是很简单的,接下来给大家发效果图吧!
点击后的效果图(可以重复 无限次数的点击哦)
若有不懂的地方,可以在下方评论,也可以扫描下方二维码进行讨论
1 0
- 微信小程序画布使用范例详解
- 微信小程序画布详解
- 微信小程序_小球弹啊弹(画布的简单使用)
- 微信小程序_小球弹啊弹(画布的简单使用)
- 绘制微信小程序画布时钟
- TabLayout布局使用范例详解
- 微信小程序开发之画布canvas 饼状图
- 微信小程序开发之画布canvas 饼状图
- 微信小程序例子——使用画布组件绘制一个会自动缩放的正方体
- 微信小程序例子——使用画布组件绘制一个会自动旋转的正方体
- 微信小程序例子——使用画布组件绘制一个带阴影及下划线的文字
- 微信小程序例子——使用画布组件绘制一个半径为50px的圆
- 使用perl编写socket程序范例
- JGroups使用范例(聊天小程序)
- jquery选择器使用 学习范例详解
- 微信小程序例子——使用画布组件绘制一个长200px,宽100px的长方形
- 微信小程序例子——使用画布组件绘制一条长度为230px的水平直线
- 微信小程序UI代码书写范例
- 1062. 最简分数(20)
- Hadoop集群安装配置教程_Hadoop2.6.0_Ubuntu/CentOS
- 解决URL传递中文乱码问题。
- linux下开机自动开启单机oracle
- 搭建java环境。
- 微信小程序画布使用范例详解
- Ask Premier Field Engineering (PFE) Platforms--The Slow Boot Case of the NetTCPPortSharing and NLA S
- CSS布局奇葩技巧之--各种居中
- 第十五周OJ——字符串比较
- linux下单节点oracle数据库间ogg搭建
- 安卓自动选择调用前置或后置摄像头
- 使用URLEncoder、URLDecoder进行URL参数的转码与解码 encodeURIComponent编码
- zookeeper体系架构
- 转换数据库连接池为hikaricp