Original: HTML5 Realization Doodle Board
Recently busy, looked at the HTML5, powerful drawing function surprised me, so, wrote a small thing---graffiti board, can realize the function: painting, colour, adjust the size of the brush
HTML5 's drawings can be divided into points, lines, faces, circles, pictures, points and lines, this is the basis of all the plane effect, with these two things, there is nothing to draw out of things, only unexpected algorithms.
First on the code:
Html
1 <Bodystyle= "Cursor:pointer">2 <CanvasID= "Mycavas"width= "1024x768"Height= "The "style= "Border:solid 4px #000000"></Canvas><!--Canvas -3 <inputtype= "Color"ID= "Color1"name= "Color1"/><!--Coloring Device -4 <Outputname= "a" for= "Color1"Onforminput= "Innerhtml=color1.value"></Output>5 <inputtype= "Range"name= "Points"ID= "Size"min= "5"Max= " the" /><!--Drag Bar -6 </Body>
Effect:
Well, a simple drawing interface is done,
Let's start writing some lines of code.
1$. Draw = {};2 $.extend ($. Draw, {3D2: "",4CX: "",5Box: "Mycavas",//Canvas ID6Boxobj:function(){//Canvas Objects7 This. Cx=document.getelementbyid ( This. Box);8 },9D2:function(){//2d drawing ObjectsTen This. D2 = This. Cx.getcontext ("2d"); One }, ACricle:function(x, Y, R, color) {//Draw a circle - if( This. D2) { - This. D2.beginpath (); the This. D2.arc (x, y, R, 0, Math.PI * 2,true); - This. D2.closepath (); - if(color) { - This. D2.fillstyle =color; + } - This. D2.fill (); + } A }, atInit:function() {//Initialize - This. Boxobj (); - This. D2 (); - } - -})
Believe that the simple code here can be understood, the main thing is to create an object, including creating a canvas, creating 2d objects, the method of drawing circles, and object initialization methods.
Next to the foreground HTML page to call this object
Look at the code:
1 varcolor = "#000000";//Initialize Color2 varsize = 5;//Initialize Dimensions3document.getElementById (' Color1 '). onchange =function () {4color = This. Value;5 };6document.getElementById (' size '). onchange =function () {7Size = This. Value;8 };9$. Draw.init ();//InitializeTen varTag =false;//control the current state of the mouse and play the role of opening the ink switch One varcurrent = {};//stores the point at which the mouse is pressed ADocument.onmousedown =function(option) {//Mouse Down Events -Current.x =option.x; -Current.y =OPTION.Y; the $. Draw.cricle (option.x, OPTION.Y, size, color); -Tag =true; - } -Document.onmouseup =function() {//Mouse Lift Event +Tag =false; - } +Document.onmousemove =function(option) {//Mouse Move Event A if(tag) { at if(Size >= 0) { - $. Draw.cricle (option.x, OPTION.Y, size, color); - } - } -}
This code mainly has the following several meanings
1. Capture the color space and the change event of the drag bar control to obtain the corresponding color and size values, stored for the following line drawing
2. Initializing Paint objects
3. Capture Mouse Press, lift and move events, key in a switch can control ink
Well, a simple graffiti board just fine, on my calligraphy:
is not a little idle egg ache, hehe! Calligraphy is inferior to that year