Create a drawing program using html5 canvas and JavaScript, html5canvas

Create a drawing program using html5 canvas and JavaScript, html5canvas

This article will guide you through creating a simple drawing program using canvas and JavaScript.

 

First, prepare the Canvas element of the container. Then, everything will be in JavaScript.

1 <canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>

Get the drawing environment. The getContext () method returns an environment for drawing on the canvas. The context object provides methods and properties for drawing on the canvas.

1 context = document.getElementById('canvasInAPerfectWorld').getContext("2d");

Start the Drawing Process

First, we need to store the coordinate of the drawing path. addClick function adds the coordinate point value to the array.

Var clickX = new Array (); var clickY = new Array (); var clickDrag = new Array (); // storage path point var paint; // whether to draw, when mousedown is set to truefunction addClick (x, y, dragging) {clickX. push (x); clickY. push (y); clickDrag. push (dragging );}

The redraw function re-draws the entire canvas every time it is called. First, we clear the content on the canvas and set the connection method for drawing the line color and width. Then

Draw a path between two points and draw the coordinates in the array in sequence

1 function redraw () {2 context. clearRect (0, 0, context. canvas. width, context. canvas. height); // clear the canvas content 3 4 context. strokeStyle = "# df4b26"; // set the line color to 5 context. lineJoin = "round"; // when the two lines converge, create the circular corner 6 context. lineWidth = 5; // line width 7 8 for (var I = 0; I <clickX. length; I ++) {9 context. beginPath (); // start a path, or reset the current path 10 if (clickDrag [I] & I) {11 context. moveTo (clickX [I-1], clickY [I-1]); 12} else {13 context. moveTo (clickX [I]-1, clickY [I]); 14} 15 context. lineTo (clickX [I], clickY [I]); 16 context. closePath (); 17 context. stroke (); // draw path 18} 19}

 

Events required during plotting

1 mousedown event

This event is triggered when you click draw on the canvas. The addClick function is called and the paint is set to true.

1 $('#canvas').mousedown(function(e){2   var mouseX = e.pageX - this.offsetLeft;3   var mouseY = e.pageY - this.offsetTop;5   paint = true;6   addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);7   redraw();8 });

2. mousemove event

When the paint set in mousedown is true, the mousemove event is triggered when the mouse moves, all the points that move the mouse are recorded, and redraw is continuously called to re-paint the cloth.

1 $('#canvas').mousemove(function(e){2   if(paint){3     addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);4     redraw();5   }6 });

3. mouseup event

Mouseup: Click and hold the mouse, or drag it, and then release it. This indicates that the path is drawn and the painting is set to false.

1 $('#canvas').mouseup(function(e){2   paint = false;3 });

4 mouseleave event

Mouseleave move the mouse away from the canvas Element and set paint to false.

1 $('#canvas').mouseleave(function(e){2   paint = false;3 });