微信小程序canvas重绘怎么弄

微信小程序可以用画布画图标，也可以让小程序页面更加丰富多彩，但是画出来的效果不好怎么办？可能需要用微信小程序画布重画，就是把画出来的图擦掉，重画。以下是具体操作方法。

我们先来看看重绘的效果图：

画布重绘的小程序源代码：

index.html

disable-scroll='false '

bindtouchstart=' touchstart '

bindtouchmove='touchmove '

bindtouchend=' touchend

手指滑动码

//手指触摸动作开始

touchstart:功能(e) {

//获取触摸点的坐标

this . startx=e . changed touch[0]。x

this . starty=e . changed touch[0]。y

this.context=wx.createcontext

if(this.isclear){ //判断启用的橡皮擦功能是否为true表示清除，false表示绘图。

这个。context . setstrokestyle(' # f8 f8 ')//将此处的线条样式设置为画布的背景颜色。橡皮擦的原理是用画布的背景色填充被擦除的地方，达到橡皮擦的效果

这个。背景。set line cap(' round ')//设置线条端点的样式

这个。context . setline join(' round ')//设置两条线相交的样式

这个。设置线宽(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 . setline width(this . data . pen)

这个。context . set line cap(' round ')//使线条变圆

this.context.beginpath

}

},

//用手指触摸后移动

touchmove:功能(e) {

var start x1=e . changed touch[0]。x

var start 1=e . changed touch[0]。y

if(this.isclear){ //判断启用的橡皮擦功能是否为true表示清除，false表示绘图。

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

this . context . move to(this . startx，this . starty)；//将路径移动到画布中的指定点，但不要创建线条

this.context.lineto(startx1，start 1)；//添加一个新的点，然后从这个点到画布中比较后一个指定点创建一条线

this . context . stroke；//绘制当前路径

恢复//恢复以前保存的坐标轴的缩放、旋转和平移信息

this.startx=startx1

this.starty=starty1

}else{

this . context . move to(this . startx，this.starty)

this.context.lineto(startx1，start 1)

上下文笔画

this.startx=startx1

this.starty=starty1

}

//只是记录方法调用的容器，用来生成记录绘制行为的actions数组。上下文和上下文没有对应关系，一个上下文生成的画布的绘制动作数组可以应用到多个

wx.drawcanvas({

canvasid: 'mycanvas '，reserve: true，动作： this.context.getactions//get绘制动作阵列

})

}

微信小程序画布重绘核心原理说明：

1.您可以使用小程序画布绘制不同颜色的线条。有三种主要方法：setstroke style moveto(路径移动到画布中的指定点)lineto(添加一个新点，然后创建一条从该点到指定点的线)，这样您就可以在两个不同的坐标之间绘制不同颜色的线！

2、小程序橡皮擦原理：通过把要擦除的区域画成和画布一样的颜色，就可以达到橡皮擦的效果，其实是另一种“骗”眼睛的方式~

看了以上信息，你知道微信小程序画布重绘吗？文中对小程序效果、开发代码和重绘原理做了非常清楚的介绍。我们可以通过关注源代理网络的小节目频道来获得更多的实用信息。

下面是微信小程序如何使用setdata修改标题开头的数组。标题到此结束

微信小程序如何使用setdata修改数组？在开发微信小程序的过程中，应该如何使用setdata修改数组？接下来，小编将介绍微信小程序如何使用setdata修改array的相关内容。请往下看。

微信小程序如何使用setdata修改数组？

在微信小程序中，经常会遇到修改数组中某项的值，比如array[0]或者object.item在某个对象中的值。这些值需要在微信小程序中使用一个叫做setdata的方法，这个方法以键值对的形式修改数据，setdata({参数名： value })；

既然知道参数是以键值对的形式传递的，那么在修改数组和对象的时候，就可以直接把要修改的参数名写入对应的字符串，然后用[]把applet字符串括起来，告诉编译器这是指字符对应的实际位置。

使用setdata修改数组所需的微信小程序代码如下：

[html]查看普通copy var authority=' button group . authority '

that.setdata({

[authority]: par sent(级别)

})

[html]查看普通copyvar printprice='item[' i ']。print _ price '；

this.setdata({

[print price]: e . detail . value

});

html如下：

小程序js如下：

页面({

数据： {

todo :[{ id : 0，text:'abc '，isdelete: false}]

},

//事件处理程序

showdeletebtn:函数(事件){

var index=event . current target . id；

var deletedtodo='todos[' index ']。文本'；

this.setdata({

deletedtodo: true

});

}

})

根据文档，如果数组中的特定值被修改，数组[0]的格式。可以采用文本“:‘变更数据’: