This is a simple drawing application implemented on canvas using javascript. You can draw images in the following area using a html5-supported Browser:
Your browser does not support canvas!
The function is very simple. The principle is similar to that of drag-and-drop. There are mainly three events:
1. Bind The mousedown event to the canvas to mark the start of the painting (call moveTo to move the paint brush)
2. Bind The mousemove event to the document to process the painting behavior (call lineTo and stroke for painting)
3. Bind The mouseup event on the document to mark the end of the painting (unbind two events on the document)
Note how to pass the correct coordinate value when calling the moveTo and lineTo methods. The coordinate value should be the offset of the cursor relative to the upper left corner of the canvas, when obtaining the image, you need to consider the position of the canvas relative to the current view. The getBoundingClientRect method is useful (this method should be implemented by browsers that support HTML5). Finally, the clientX of the event object is used, clientY minus left and top returned by the getBoundingClientRect method.
In this way, a simple mouse painting function is completed, and there are also shortcomings, such as the inability to draw points... I personally think it is still relatively weak to use canvas for drawing, and complicated functions are not very easy to implement. However, you can try to add a method to save the image, for example, define Draw. prototype. save = function (){...}, you can call the toDataURL method.
Here is a good HTML5 canvas tutorial for beginners to learn ~
The source code is attached:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> draw demo </title>
</Head>
<Body>
<Canvas id = "the_stage" width = "600" height = "400" style = "border: 1px solid #999;"> canvas is not supported in your browser! </Canvas>
<Script>
Function Draw (arg ){
If (arg. nodeType ){
This. canvas = arg;
} Else if (typeof arg = 'string '){
This. canvas = document. getElementById (arg );
} Else {
Return;
}
This. init ();
}
Draw. prototype = {
Init: function (){
Var that = this;
If (! This. canvas. getContext ){
Return;
}
This. context = this. canvas. getContext ('2d ');
This. canvas. onselectstart = function (){
Return false; // fixed the cursor style issue in chrome.
};
This. canvas. onmousedown = function (event ){
That. drawBegin (event );
};
},
DrawBegin: function (e ){
Var that = this,
Stage_info = this. canvas. getBoundingClientRect ();
Window. getSelection? Window. getSelection (). removeAllRanges ():
Document. selection. empty (); // clear the selected text
This. context. moveTo (
E. clientX-stage_info.left,
E. clientY-stage_info.top
);
Document. onmousemove = function (event ){
That. drawing (event );
};
Document. onmouseup = this. drawEnd;
},
Drawing: function (e ){
Var stage_info = this. canvas. getBoundingClientRect ();
This. context. lineTo (
E. clientX-stage_info.left,
E. clientY-stage_info.top
);
This. context. stroke ();
},
DrawEnd: function (){
Document. onmousemove = document. onmouseup = null;
}
};
Var draw = new Draw (the _ stage ');
</Script>
</Body>
</Html>