微信小程序学习用demo推荐：微信涂鸦、canvas学习_H5之家

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

文章来源：微信小程序联盟

微信小程序,小应用,开发

2017/02/21 17:13

这个demo，应该是作者的练习demo，表面上并没有展示完全；

结构图：

其中微信涂鸦部分预览图：

示例代码：

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 startX1 = e.changedTouches[0].x

var startY1 = e.changedTouches[0].y

if(this.isClear){ //判断是否启用的橡皮擦功能 ture表示清除 false表示画画

this.context.save(); //保存当前坐标轴的缩放、旋转、平移信息

this.context.moveTo(this.startX,this.startY); //把路径移动到画布中的指定点，但不创建线条

this.context.lineTo(startX1,startY1); //添加一个新点，然后在画布中创建从该点到最后指定点的线条

this.context.stroke(); //对当前路径进行描边

this.context.restore() //恢复之前保存过的坐标轴的缩放、旋转、平移信息

this.startX = startX1;

this.startY = startY1;

}else{

this.context.moveTo(this.startX, this.startY)

this.context.lineTo(startX1, startY1)

this.context.stroke()

this.startX = startX1;

this.startY = startY1;

}

//只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个

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'

}

})

微信小程序（xmooo.com）微信小程序商店:打造小程序全方位平台养娃神器，新手爸妈不容错过的微信小程序

发布小程序

提交公众号

官方微信

扫一扫关注小程序官方微信

新浪微博

扫一扫

( 暂不支持下载 )

为您推荐

摩拜单车

标签：交通出行,火车票,

一家民宿+

标签：民宿,酒店,住宿,

QQ阅读

标签：

豆当专业搬家公司

标签：搬家公司,面包车出

忆年共享相册

标签：纪念相册,网络相册