Use html5 canvas and JavaScript to create a simple example of a drawing program, html5canvas

Use html5 canvas and JavaScript to create a simple example of a drawing program, 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.

Copy XML/HTML Code to clipboard

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

Obtain the drawing environment. The context object provides methods and attributes for drawing on the canvas.

Copy XML/HTML Code to clipboard

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.

Copy the content to the clipboard using JavaScript Code

1. Var clickX = new Array ();
2. Var clickY = new Array ();
3. Var clickDrag = new Array (); // storage path
4. Var paint; // specifies whether to draw the image. Set it to true when mousedown.
5. Function addClick (x, y, dragging)
6. {
7. ClickX. push (x );
8. ClickY. push (y );
9. ClickDrag. push (dragging );
10. }

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

Copy XML/HTML Code to clipboard

1. Function redraw (){
2. Context. clearRect (0, 0, context. canvas. width, context. canvas. height); // clear the canvas content
4. Context. strokeStyle = "# df4b26"; // set the line color
5. Context. lineJoin = "round"; // create a circular corner when two lines converge.
6. Context. lineWidth = 5; // line width
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 the 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.

Copy the content to the clipboard using JavaScript Code

1. $ ('# Canvas'). mousedown (function (e ){
2. Var mouseX = e. pageX-this. offsetLeft;
3. Var mouseY = e. pageY-this. offsetTop;
4. Paint = true;
5. AddClick (e. pageX-this. offsetLeft, e. pageY-this. offsetTop );
6. Redraw ();
7. });

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.

Copy the content to the clipboard using JavaScript Code

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.

Copy XML/HTML Code to clipboard

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.

Copy XML/HTML Code to clipboard

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

The simple example of creating a drawing program using the canvas and JavaScript of html5 is all the content shared by Alibaba Cloud. I hope you can give us a reference and support for the house.

Address: http://www.cnblogs.com/fangsmile/archive/2016/07/05/5644611.html