Canvas---Canvas drawing, dashed line, guides, line color, line width, integrated enhanced version



Use canvas to implement the paint program.

This update mainly realizes the function:

Selection of dashed solid lines, guides, line color selection, line width selection

Further collation of the code, found a lot of useful writing, specifically see below.

Effect:

Source:

①html Code

<!docutype html><!--Date 2014-12-28-->
② Drawing axes and grids
In the first article, I didn't change it.
http://blog.csdn.net/mikuscallion/article/details/43115917
③ Plotting dashed lines
Draw dashed//Incoming parameters: Context, start point, end point, dashed interval function drawdashedline (context,x1,y1,x2,y2,dashlength) {        //Use ternary expression to implement default parameters        Dashlength = dashlength===undefined? 5:dashlength;        Horizontal length        var deltax = x2-x1;        Vertical length        var deltay = y2-y1;        Number of dashed lines        var numdashed = Math.floor (            math.sqrt (deltax*deltax+deltay*deltay)/dashlength        );        Start Drawing        Context.beginpath ();        for (var i=0; i<numdashed;i++) {            //This notation is too powerful            //(deltax/numdashed) refers to the length of the dashed line            context[i%2===0? "MoveTo": "LineTo"] (x1+ (deltax/numdashed) *i,y1+ (deltay/numdashed) *i);            }        Remember to stroke the line Ah        context.stroke ();        End Drawing        Context.closepath ();}
④ Main drawing Code
Vars--------------------------------------------------------var canvas =document.getelementbyid ("Canvas"),             Context =canvas.getcontext ("2d"),//drawing surface variable drawingsurfaceimagedata,//mouse pressed related object  MouseDown = {},//rubber Band Rectangle Object rubberbandrect = {},//drag identity variable dragging =                False        CONTROLS//Erase canvas control var Eraseallbutton = document.getElementById ("Eraseallbutton");        The control of the axis var axescheckbox = document.getElementById ("Axescheckbox");        Control of the grid line var Gridcheckbox = document.getElementById ("Gridcheckbox");         The control of the auxiliary line var guidewirescheckbox = document.getElementById ("Guidewirescheckbox");        The control of the line color var strokecolorselectbox =document.getelementbyid ("Strokecolorselectbox");        Line Style control var linetypeselectbox = document.getElementById ("Linetypeselectbox"); Control of line width var linewidthselectbox = Document.getelEmentbyid ("Linewidthselectbox");//functions---------------------------------------------------// Convert window coordinates to canvas coordinates//Incoming Parameters: window coordinates (x, y) function Windowtocanvas (x, y) {//Get Canvas element margin object var            Bbox = Canvas.getboundingclientrect ();                    Returns a Coordinate object//a JSON-like notation for return {x:x-bbox.left* (Canvas.width/bbox.width),        Y:y-bbox.top* (Canvas.height/bbox.height)}; }//Save the current drawing surface data function Savedrawingsurface () {//Get drawing surface data from the context Drawingsurfaceimagedata = Co        Ntext.getimagedata (0,0,canvas.width,canvas.height); }//Restores the current drawing surface function Restoredrawingsurface () {//restores the drawing surface data to the context Context.putimagedata (Drawin        gsurfaceimagedata,0,0); }//Rubber band correlation function//update rubber Band Rectangle + diagonal//Incoming parameter: Coordinate object loc function Updaterubberband (loc) {Up            Daterubberbandrectangle (Loc); DrawrubberbandshapE (Loc); }//Update rubber Band rectangle//Incoming parameter: Coordinate object loc function Updaterubberbandrectangle (loc) {//Get rectangle's width ru            Bberbandrect.width = Math.Abs (loc.x-mousedown.x);            Get the high rubberbandrect.height of the rectangle = Math.Abs (LOC.Y-MOUSEDOWN.Y);                Gets the position of the rectangle vertex (left,top)//If the mouse-pressed point (the starting point) is at the left of the current point//here draw one to understand if (loc.x > Mousedown.x) {            Rubberbandrect.left = mousedown.x;            }else{rubberbandrect.left = loc.x;            } if (Loc.y > mousedown.y) {rubberbandrect.top = MOUSEDOWN.Y;            }else{rubberbandrect.top = loc.y;            }}//Draw the diagonal of the rubber band rectangle//pass in Parameter: Coordinate object loc function Drawrubberbandshape (loc) {//Get current line type            var linetype = Linetypeselectbox.value;            Gets the current line color var linecolor = Strokecolorselectbox.value; Gets the current line width var linewidth = Linewidthselectbox. value;            There are changes to the context brush properties will be done brush protection context.save ();            Context.strokestyle = LineColor;            Context.linewidth = linewidth;                if (Linetype = = = "Solid") {//alert ("draw");                Note Restart path Context.beginpath ();                Context.moveto (MOUSEDOWN.X,MOUSEDOWN.Y);                Here you can change the dashed context.lineto (LOC.X,LOC.Y) into a picture;               Context.stroke ();            }else if (Linetype = = = "Dashed") {Drawdashedline (CONTEXT,MOUSEDOWN.X,MOUSEDOWN.Y,LOC.X,LOC.Y);        } context.restore (); }//Draw auxiliary lines-------------------------//Draw horizontal function Drawhorizontalline (y) {conte            Xt.beginpath ();            Context.moveto (0,y+0.5);            Context.lineto (context.canvas.width,y+0.5);        Context.stroke ();            }//Draw vertical Line function Drawverticalline (x) {Context.beginpath (); Context.moveto (x+0.5,0);            Context.lineto (X+0.5,context.canvas.height);        Context.stroke ();            }//Draw auxiliary Line function drawguidewires (x, y) {//Brush protection Context.save ();            Context.strokestyle = "Red";            Context.linewidth = 0.5;            Drawhorizontalline (y);            Drawverticalline (x);        Context.restore (); }//Initialize function initialization () {//Clear canvas context.clearrect (0,0,canvas.width,canvas.            height);            The color of the drawing grid and coordinates is the default if (axescheckbox.checked) {drawaxes (context,40);            } if (gridcheckbox.checked) {DrawGrid (context,10,10);           }}//event hander-----------------------------------------------------Canvas.onmousedown = function (e) {           var loc =windowtocanvas (E.clientx,e.clienty);           E.preventdefault ();           Savedrawingsurface ();           mousedown.x = loc.x; MouseDown.y = loc.y;        dragging = true;            } Canvas.onmousemove = function (e) {var loc;                if (dragging) {e.preventdefault ();                loc = Windowtocanvas (E.clientx,e.clienty);                Restoredrawingsurface ();            Updaterubberband (Loc);               } if (dragging&&guidewirescheckbox.checked) {drawguidewires (LOC.X,LOC.Y);            }} canvas.onmouseup = function (e) {loc = Windowtocanvas (E.clientx,e.clienty);            Restoredrawingsurface ();            Updaterubberband (Loc);        dragging = false; }//The operation that needs to be erased requires reinitialization of Eraseallbutton.onclick = function (e) {context.clearrect (0,0,canvas.wid            Th,canvas.height);            Initialization ();        Savedrawingsurface ();        } Axescheckbox.onchange = function (e) {initialization ();         } Gridcheckbox.onchange = function (e) {   Initialization (); }//mian----------------------------------------------initialization ();

Canvas---Canvas drawing, dashed line, guides, line color, line width, integrated enhanced version