微信小程序学习用demo推荐：微信涂鸦：canvas学习

这个demo，应该是作者的练习demo，表面上并没有展示完全；结构图：   其中微信涂鸦部分预览图：   示例代码： [AppleScript]  纯文本查看  复制代码 ? 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 Page ( {    data : {      pen : 3 , / / 画笔粗细默认值      color : ' #cc0033' //画笔颜色默认值    } ,    startX : 0 , / / 保存X坐标轴变量    startY : 0 , / / 保存Y坐标轴变量    isClear : false , / / 是否启用橡皮擦标记    / / 手指触摸动作开始    touchStart : function ( e ) {        / / 得到触摸点的坐标        this.startX = e.changedTouches[ 0 ].x        this.startY = e.changedTouches[ 0 ].y        this. context = wx.createContext ( )          if ( this.isClear ) { / / 判断是否启用的橡皮擦功能  ture表示清除  false 表示画画           this. context .setStrokeStyle ( ' #FFFFFF') //设置线条样式 此处设置为画布的背景颜色  橡皮擦原理就是：利用擦过的地方被填充为画布的背景颜色一致 从而达到橡皮擦的效果           this. context .setLineCap ( ' round ' ) / / 设置线条端点的样式           this. context .setLineJoin ( ' round ' ) / / 设置两线相交处的样式           this. context .setLineWidth ( 20 ) / / 设置线条宽度           this. context . save ( ) ;  / / 保存当前坐标轴的缩放、旋转、平移信息           this. context .beginPath ( ) / / 开始一个路径           this. context .arc ( this.startX , this.startY , 5 , 0 , 2 * Math.PI , true ) ;  / / 添加一个弧形路径到当前路径，顺时针绘制  这里总共画了 360 度  也就是一个圆形           this. context .fill ( ) ;  / / 对当前路径进行填充           this. context .restore ( ) ;  / / 恢复之前保存过的坐标轴的缩放、旋转、平移信息        } else {           this. context .setStrokeStyle ( this. data .color )           this. context .setLineWidth ( this. data .pen )           this. context .setLineCap ( ' round ' ) / / 让线条圆润           this. context .beginPath ( )                  }    } ,    / / 手指触摸后移动    touchMove : function ( e ) {                var startX 1 = e.changedTouches[ 0 ].x        var startY 1 = e.changedTouches[ 0 ].y          if ( this.isClear ) { / / 判断是否启用的橡皮擦功能  ture表示清除  false 表示画画            this. context . save ( ) ;  / / 保存当前坐标轴的缩放、旋转、平移信息          this. context .moveTo ( this.startX , this.startY ) ;  / / 把路径移动到画布中的指定点，但不创建线条          this. context .lineTo ( startX 1 , startY 1 ) ;  / / 添加一个新点，然后在画布中创建从该点到最后指定点的线条          this. context .stroke ( ) ;  / / 对当前路径进行描边          this. context .restore ( )  / / 恢复之前保存过的坐标轴的缩放、旋转、平移信息                      this.startX = startX 1 ;          this.startY = startY 1 ;                 } else {          this. context .moveTo ( this.startX , this.startY )          this. context .lineTo ( startX 1 , startY 1 )          this. context .stroke ( )            this.startX = startX 1 ;          this.startY = startY 1 ;                  }        / / 只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。 context 跟 < canvas / > 不存在对应关系，一个 context 生成画布的绘制动作数组可以应用于多个 < canvas / >        wx.drawCanvas ( {           canvasId : 'myCanvas' ,           reserve : true ,           actions : this. context .getActions ( ) / / 获取绘图动作数组        } )    } ,    / / 手指触摸动作结束    touchEnd : function ( ) {            } ,    / / 启动橡皮擦方法    clearCanvas : function ( ) {        if ( this.isClear ) {          this.isClear = false ;        } else {          this.isClear = true ;        }    } ,    penSelect : function ( e ) { / / 更改画笔大小的方法      console. log ( e.currentTarget ) ;      this.setData ( { pen : parseInt ( e.currentTarget.dataset.param ) } ) ;      this.isClear = false ;    } ,    colorSelect : function ( e ) { / / 更改画笔颜色的方法      console. log ( e.currentTarget ) ;      this.setData ( { color : e.currentTarget.dataset.param } ) ;      this.isClear = false ;    } ,    / / 下拉刷新    onPullDownRefresh : function ( ) {      wx.stopPullDownRefresh ( )    } ,    / / 页面分享    onShareAppMessage : function ( ) {      return {        title : '微信小程序' ,        desc : '这是微信小程序的分享功能' ,        path : ' / page / canvas'      }    } } ) 项目地址及下载： 本帖隐藏的内容 https://github.com/pencil2014/wx_lite   wx_lite-master.zip (60.31 KB, 下载次数: 3)