Javascript is not affected by canvas size changes.

 

Today, I am so bored that I have encountered a problem when a friend in the group used canvas to draw curve images. Of course, I can't help but look at the problem as a very enthusiastic friend, after helping the friend solve the problem, he found that the canvas was fixed in size during the painting process, and all the painting was written to death. In this way, I wrote a canvas to change the demo as needed ...... after debugging, there is a problem with the wood painting. Share it !!!! (Because I typed it out in my pure notepad at home, there was no error. If there is a semicolon that should not be written, please remind me, thank you .) The distance between x and y axes is 20px.

 

Reprinted to the famous address. Thank you.

 

<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"/> </script>

 

<Canvas id = "controlCanvas" height = "519" width = "1035"> </canvas> // adjust the height and width for you

<Button id = "changeSize"> change size </button>

<Script type = "text/javascript" src = "jquery-1.6.4.min.js"/> </script>

<Script type = "text/javascript">

 

$ (Function (){

Init ();

 

$ ("# ChangeSize"). click (function (){

$ ("# ControlCanvas"). attr ("high", 800 );

$ ("# ControlCanvas"). attr ("width", 1100 );

 

Init ();

});

 

})

Function init ()

{

 

Var canvas = document. getElementById ("controlCanvas ");

Var context = canvas. getContext ("2d ");

Var canvasWidth = $ (canvas). attr ("width"); // obtain the canvas width.

 

Var canvasHeight = $ (canvas). attr ("Height"); // obtain the canvas Height.

Var canvasWidthFloat = canvasWidth % 20; // prevent the canvas width from being a multiple of 20. Otherwise, the coordinate points are incorrect.

Var canvasHeightFloat = canvasHeight % 20; // prevent the canvas height from being a multiple of 20. Otherwise, the coordinate points are incorrect.

// Draw Y-axis parallel lines

For (var x = 20; x <canvasWidth-20; x + = 20 ){

Context. moveTo (x, canvasHeightFloat );

Context. lineTo (x, canvasHeight-20 );

}

// Draw parallel lines on the X axis

For (var y = 20; y <canvasHeight-20; y + = 20 ){

Context. moveTo (20, y + canvasHeightFloat );

Context. lineTo (canvasWidth-20, y + canvasHeightFloat );

}

Context. strokeStyle = "# ddd ";

Context. stroke ();

Context. beginPath ();

// Draw the abscissa

Context. moveTo (20, canvasHeight-20 );

Context. lineTo (canvasWidth-20, canvasHeight-20 );

Context. moveTo (canvasWidth-35, canvasHeight-30 );

Context. lineTo (canvasWidth-20, canvasHeight-20 );

Context. lineTo (canvasWidth-35, canvasHeight-10 );

// Draw the ordinate

Context. moveTo (20, canvasHeight-20 );

Context. lineTo (20, canvasHeightFloat );

Context. moveTo (10, canvasHeightFloat + 15 );

Context. lineTo (20, canvasHeightFloat );

Context. lineTo (30, canvasHeightFloat + 15 );

 

 

 

Context. strokeStyle = "#000 ";

Context. stroke ();

Var yvalue = 0

Var yvalueMax = parseInt (canvasHeight-20)/20)

// In this way, your y coordinate will not be troubled by the canvas variable.

For (var x = 20; x <canvasHeight; x + = 20)

{

If (yvalue = yvalueMax)

Break;

Context. fillText (yvalue ++, 5, canvasHeight-x + 3); // move the value of the y axis down by 3px, so that the value of y is displayed in the middle of a parallel line.

}

// X-axis coordinate. Here, the coordinate point is moved after canvas is not a factor of 20 -_-! After testing, no matter how you adjust it, it's okay.

Var xvalue = parseInt (canvasWidth-20)/20)-1

For (var y = 20; y <canvasWidth; y + = 20)

{

If (xvalue = 0)

Break;

Context. fillText (xvalue --, canvasWidth-y-canvasWidthFloat-3, canvasHeight-5); // move the value of the x axis to the right 3px so that the x value is displayed in the middle of a parallel line

}

 

}

 

 

</Script>

Author Niu-_-Worm