Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge about "how to graffiti with canvas group of Weixin Mini Programs (Mini)." In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

Core Principle Description:

1, can draw different color lines are mainly the following three methods setStrokeStyle(brush color) moveTo(move the path to the specified point in the canvas, but do not create a line) lineTo(add a new point, and then create a line from that point to the last specified point in the canvas) So you can draw different color lines from point A coordinates to point B coordinates!!!

2. Principle of eraser: The reason why you can erase the image on the canvas is to draw the area to be erased into the same color as the canvas, so that you can "deceive" your eyes to achieve the effect of eraser!!!

index.html

disable-scroll="false"

bindtouchstart="touchStart"

bindtouchmove="touchMove"

bindtouchend="touchEnd">

copy code

Finger Slide Code

//finger touch action starts

touchStart: function (e) {

//Get the coordinates of the touch point

this.startX = e.changedTouches[0].x

this.startY = e.changedTouches[0].y

this.context = wx.createContext()

if(this.isClear){ //judge whether the eraser function is enabled true means clear false means draw

this.context.setStrokeStyle ('#F8')//Set the line style here to the background color of the canvas Eraser principle is: use the erased place to fill the background color of the canvas to achieve the effect of eraser

this.context.setLineCap ('round ') //Style line endpoints

this.context.setLineJoin ('round ') //Sets the style of the intersection of two lines

this.context.setLineWidth(20) //Set lineWidth

this.context.save (); //Save zoom, rotation and translation information of current coordinate axis

this.context. initiPath () //start a path

this.context.arc(this.startX,this.startY,5,0,2*Math.PI,true); //Add an arc path to the current path, draw clockwise here a total of 360 degrees is a circle

this.context.fill(); //Fill the current path

this.context.restore(); //Restore previously saved scaling, rotation, and translation information about the coordinate axis

}else{

this.context.setStrokeStyle(this.data.color)

this.context.setLineWidth(this.data.pen)

this.context.setLineCap ('round ') //round lines

this.context.beginPath()

}

},

//Move after finger touch

touchMove: function (e) {

var startX1 = e.changedTouches[0].x

var startY1 = e.changedTouches[0].y

if(this.isClear){ //judge whether the eraser function is enabled true means clear false means draw

this.context.save (); //Save zoom, rotation and translation information of current coordinate axis

this.context.moveTo(this.startX,this.startY); //Moves the path to a specified point on the canvas without creating a line

this.context.lineTo(startX1,startY1); //Add a new point and create a line on the canvas from that point to the last specified point

this.context.stroke(); //stroke the current path

this.context.restore() //Restore previously saved scaling, rotation, and translation information about the coordinate axis

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;

}

//is just a container for recording method calls, used to generate an actions array that records drawing behavior. There is no corresponding relationship between context and canvas, and one context can be applied to multiple drawing action arrays.

wx.drawCanvas({

canvasId: 'myCanvas',

reserve: true,

actions: this.context.getActions() //Get drawing action array

})

}

copy code

The above is a part of the code display, the following is the core principle:

1, can draw different color lines are mainly the following three methods setStrokeStyle(brush color) moveTo(move the path to the specified point in the canvas, but do not create a line) lineTo(add a new point, and then create a line from that point to the last specified point in the canvas) So you can draw different color lines from point A coordinates to point B coordinates!!!

2. Principle of eraser: The reason why you can erase the image on the canvas is to draw the area to be erased into the same color as the canvas, so that you can "deceive" your eyes to achieve the effect of eraser!!!

"How to doodle with canvas group of Weixin Mini Programs" is introduced here. Thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.