Canvas --- Canvas printprint, dotted line, guides, line color, line width, integrated enhanced version, canvas dotted line

Canvas --- Canvas printprint, dotted line, guides, line color, line width, integrated enhanced version, canvas dotted line
Zookeeper

Use Canvas to implement the drawing program.

This update mainly implements the following functions:

Selection of dotted line solid line, guides, line color selection, line width Selection

I further sorted out the code and found a lot of useful writing methods. For details, refer to the following.

Effect:

Source code:

① HTML code

<! Docutype html> <! -- Date 2014-12-28 --> 





② Draw coordinate axes and grids
In the first article, I did not change it.
Http://blog.csdn.net/mikuscallion/article/details/43115917
③ Draw dotted lines
// Draw the dotted line // input parameters: context, start point, end point, and dotted line interval function drawDashedLine (context, x1, y1, x2, y2, dashLength) {// use a ternary expression to implement the default parameter dashLength = undefined? 5: dashLength; // horizontal length var deltaX = x2-x1; // vertical length var deltaY = y2-y1; // Number of dotted lines var numDashed = Math. floor (Math. sqrt (deltaX * deltaX + deltaY * deltaY)/dashLength); // start to draw context. beginPath (); for (var I = 0; I <numDashed; I ++) {// This write method is too powerful // (deltaX/numDashed) is the dotted line length of context [I % 2 = 0? "MoveTo": "lineTo"] (x1 + (deltaX/numDashed) * I, y1 + (deltaY/numDashed) * I);} // remember to trace context. stroke (); // end the painting context. closePath ();}
④ Main drawing code

// Vars ---------------------------------------------------------- var canvas = document. getElementById ("canvas"), context = canvas. getContext ("2d"), // The drawing surface variable drawingSurfaceImageData being drawn, // mouse down the relevant object mousedown ={}, // rubber band rectangular object rubberbandRect = {}, // drag the identification variable dragging = false; // control // erase the canvas control var eraseAllButton = document. getElementById ("eraseAllButton"); // axis control var axesCheckBox = document. getElementById ("axesCheckBox"); // control the gridline var gridCheckBox = document. getElementById ("gridCheckBox"); // controls the Auxiliary Line var guideWiresCheckBox = document. getElementById ("guideWiresCheckBox"); // line color control var strokeColorSelectBox = document. getElementById ("strokeColorSelectBox"); // line style control var lineTypeSelectBox = document. getElementById ("lineTypeSelectBox"); // line width control var lineWidthSelectBox = document. getElementById ("lineWidthSelectBox"); // Functions // convert the window coordinate to the Canvas coordinate. // input parameters: Window coordinate (x, y) function windowToCanvas (x, y) {// get the margin object var bbox = canvas of the canvas element. getBoundingClientRect (); // returns a coordinate object // return {x: x-bbox, A json-like method. left * (canvas. width/bbox. width), y: y-bbox. top * (canvas. height/bbox. height) };}// Save the current drawing surface data function saveDrawingSurface () {// obtain the drawing surface data from the context drawingSurfaceImageData = context. getImageData (0, 0, canvas. width, canvas. height);} // restore the current drawing surface function restoreDrawingSurface () {// restore the drawing surface data to the context. putImageData (drawingSurfaceImageData,);} // rubber band related function // update the rubber band rectangle + diagonal line // input parameter: coordinate object loc function updateRubberband (loc) {updateRubberbandRectangle (loc ); drawRubberbandShape (loc);} // update the rubber band rectangle // input parameter: The coordinate object loc function updateRubberbandRectangle (loc) {// obtain the width of the rectangle rubberbandRect. width = Math. abs (loc. x-mousedown. x); // obtain the high rubberbandRect of the rectangle. height = Math. abs (loc. y-mousedown. y); // obtain the position of the vertex of the rectangle (left, top) // if the point pressed by the mouse (start point) on the left of the current vertex // you can 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 line of the rubber band rectangle // input parameter: coordinate object loc function drawRubberbandShape (loc) {// obtain the current line type var lineType = lineTypeSelectBox. value; // obtain the color of the current line var lineColor = strokeColorSelectBox. value; // obtain the width of the current line var lineWidth = lineWidthSelectBox. value; // the paint brush must be used to protect the context when context attributes are changed. save (); context. strokeStyle = lineColor; context. lineWidth = lineWidth; if (lineType = "solid") {// alert ("draw"); // start the context path again. beginPath (); context. moveTo (mousedown. x, mousedown. y); // you can change it to the dotted line context. lineTo (loc. x, loc. y); context. stroke ();} else if (lineType = "dashed") {drawDashedLine (context, mousedown. x, mousedown. y, loc. x, loc. y);} context. restore ();} // draw the secondary line ----------------------- // draw the horizontal line function drawHorizontalLine (y) {context. beginPath (); context. moveTo (0, y + 0.5); context. lineTo (context. canvas. width, y + 0.5); context. stroke () ;}// draw the vertical line function drawVerticalLine (x) {context. beginPath (); context. moveTo (x + 0.5, 0); context. lineTo (x + 0.5, context. canvas. height); context. stroke () ;}// draw the secondary line function drawGuideWires (x, y) {// the paint brush protects the context. save (); context. strokeStyle = "red"; context. lineWidth = 0.5; drawHorizontalLine (y); drawVerticalLine (x); context. restore ();} // initialize the function initialization () {// clear the canvas context. clearRect (0, 0, canvas. width, canvas. height); // the color of the 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;} // You Need to reinitialize eraseAllButton for the operation to be erased. onclick = function (e) {context. clearRect (0, 0, canvas. width, canvas. height); initialization (); saveDrawingSurface ();} axesCheckBox. onchange = function (e) {initialization ();} gridCheckBox. onchange = function (e) {initialization ();} // Mian -------------------------------------------------- initialization ();