Home > Developer > Web Develop
Console.log (Math.PI);//PI
Console.log (MATH.SQRT (4));//square root 2
Console.log (Math.Abs (-2.3));//Absolute Value 2.3
Console.log (Math.ceil (-2.3));//Rounding Up-2
Console.log (Math.floor (-2.3));//Rounding down-3
Console.log (Math.max ( -2,3,6,1));//Maximum value 6
Console.log (Math.min ( -2,3,6,1));//Minimum Value-2
Console.log (Math.random ()); random number between//0-1
Console.log (Math.Round (3.5));//rounds a number to the nearest integer. 4
Console.log (Math.Round (3.36));//Rounding 4
Console.log (Math.Round (3.4));//Rounding 3
Console.log (Math.Round (-3.4));//Rounding-3
Console.log (Math.Round (-3.5));//Rounding-3
var date=new date ();//returns the day and time.
Console.log (date);
Console.log (Date.getdate ());//Returns the day of the one month (1 ~ 31) from the Date object.
Console.log (Date.getday ());//Returns a day of the week from a Date object (0 ~ 6).
Console.log (Date.getmonth ());//Returns the month (0 ~ 11) from the Date object.
Console.log (Date.getfullyear ());//Returns the year as a four-digit number from a Date object.
Console.log (Date.gethours ());//Returns the hour of the date object (0 ~ 23).
Console.log (Date.getminutes ());//Returns the minute of the Date object (0 ~ 59).
Console.log (Date.getseconds ());//Returns the second of the Date object (0 ~ 59).
Console.log (Date.getmilliseconds ());//Returns the milliseconds of the date object (0 ~ 999).
Console.log (Date.gettime ());//Returns the number of milliseconds since January 1, 1970.
Get Syntax: var born = new Date ("July 21, 1983 01:15:00")
document.write (Born.getminutes ())
Date.setdate (15);//sets a day of the month in the Date object (1 ~ 31).
Date.setminutes (22);//sets the minute (0 ~ 59) in the Date object.
Date.sethours (11);//sets the hour (0 ~ 23) in the Date object. Syntax: Dateobject.sethours (HOUR,MIN,SEC,MILLISEC)
Date.setmilliseconds (200);//sets the milliseconds (0 ~ 999) in the Date object.
Date.setfullyear () (2015);//sets the year (four digits) in the Date object. Syntax: Dateobject.setfullyear (Year,month,day)
Date.setseconds (24);//sets the seconds (0 ~ 59) in the Date object.
Date.setmonth (8);//sets the month (0 ~ 11) in the Date object. Syntax: Dateobject.setmonth (Month,day)
Console.log (date);
Ajax
1. AJAX = asynchronous JavaScript and XML (asynchronous JavaScript and XML).
2. Example:
<body>
<div id= "mydiv" ><button type= "button" onclick= "Loadxmldoc ()" >change content</button>
</body>
Next, add a <script> tag to the head section of the page. This tag contains the Loadxmldoc () function:
<script type= "Text/javascript" >
function Loadxmldoc ()
{
.... AJAX script goes here ...
}
</script>
3, create XMLHttpRequest object: Variable=new activexobject ("Microsoft.XMLHTTP");
4. Send a request to the server: to send the request to the server, we use the open () and send () methods of the XMLHttpRequest object:
Xmlhttp.open ("GET", "Test1.txt", true);
Xmlhttp.send ();
5. Server response: To get a response from the server, use the ResponseText or Responsexml property of the XMLHttpRequest object
Eg:document.getElementById ("Mydiv"). Innerhtml=xmlhttp.responsetext;
6. onreadystatechange Event: Whenever readyState changes, the onReadyStateChange event is triggered.
ReadyState attribute holds status information for XMLHttpRequest
onReadyStateChange stores functions (or function names) and calls the function whenever the ReadyState property changes.
ReadyState have XMLHttpRequest state. Vary from 0 to 4.
0: Request not initialized
1: Server Connection established
2: Request received
3: In Request processing
4: The request is complete and the response is ready
Status: "OK"
404: Page Not Found
Canvas
1,,<canvas> element itself does not have the ability to draw (it is just a container of graphics): <canvas id= "MyCanvas" width= "" "Height=" ></canvas>
2, <script type= "Text/javascript" >
var C=document.getelementbyid ("MyCanvas");
var Cxt=c.getcontext ("2d");//getcontext ("2d") objects are built-in HTML5 objects that have multiple drawing paths, rectangles, circles, characters, and methods for adding images. Returns an object that provides methods and properties for drawing on the canvas.
Cxt.fillstyle= "#FF0000";//Red
Cxt.fillrect (0,0,150,75);//Rectangle, draws the 150x75 rectangle on the canvas, starting from the upper-left corner (0,0).
</script>
3. Line
Draw a line by specifying where to start and where to end it:
Canvas instances: Lines
JavaScript Code:
<script type= "Text/javascript" >
var C=document.getelementbyid ("MyCanvas");
var Cxt=c.getcontext ("2d");
Cxt.moveto (10,10);
Cxt.lineto (150,50);
Cxt.lineto (10,50);
Cxt.stroke ();
</script>
4, round
Draw a circle by stipulating the size, color, and position:
Canvas instance: Round
JavaScript Code:
<script type= "Text/javascript" >
var C=document.getelementbyid ("MyCanvas");
var Cxt=c.getcontext ("2d");
Cxt.fillstyle= "#FF0000";
Cxt.beginpath ();
Cxt.arc (70,18,15,0,math.pi*2,true);
Cxt.closepath ();
Cxt.fill ();
</script>
5. Gradient
Use the color you specify to draw the gradient background:
Canvas instances: Gradients
JavaScript Code:
<script type= "Text/javascript" >
var C=document.getelementbyid ("MyCanvas");
var Cxt=c.getcontext ("2d");
var grd=cxt.createlineargradient (0,0,175,50);
Grd.addcolorstop (0, "#FF0000");
Grd.addcolorstop (1, "#00FF00");
CXT.FILLSTYLE=GRD;
Cxt.fillrect (0,0,175,50);
</script>
6. Image
Place an image on the canvas:
Canvas instances: Images
JavaScript Code:
<script type= "Text/javascript" >
var C=document.getelementbyid ("MyCanvas");
var Cxt=c.getcontext ("2d");
var img=new Image ()
Img.src= "Flower.png"
Cxt.drawimage (img,0,0);
</script>
7. Colors, styles, and shadows
Property Description
FillStyle Sets or returns the color, gradient, or pattern used to fill the drawing
Strokestyle Sets or returns the color, gradient, or pattern used for a stroke
Shadowcolor Sets or returns the color used for shadows
Shadowblur Sets or returns the level of blur used for shadows
SHADOWOFFSETX Sets or returns the horizontal distance of the shadow distance shape
Shadowoffsety Sets or returns the vertical distance of the shadow distance shape
Method description
Createlineargradient () Create a linear gradient (used on canvas content)
Createpattern () repeats the specified element in the specified direction
Createradialgradient () Creating a radial/annular gradient (used on canvas content)
Addcolorstop () specifies the color and stop position in the gradient object
Line Style
Property Description
LineCap Sets or returns the end endpoint style of a line
LineJoin Sets or returns the type of corner created when two lines intersect
LineWidth Sets or returns the current line width
Miterlimit set or return the maximum miter length
Rectangular
Method description
Rect () creates a rectangle
FillRect () Draws a "filled" rectangle
Strokerect () Draw Rectangle (no fill)
Clearrect () clears the specified pixel within the given rectangle
Path
Method description
Fill () fills the current drawing (path)
Stroke () draws a defined path
Beginpath () starts a path or resets the current path
MoveTo () Moves the path to the specified point in the canvas without creating a line
Closepath () Creates a path from the current point back to the starting point
LineTo () Adds a new point and creates a line from that point to the last specified point in the canvas
Clip () cuts an area of any shape and size from the original canvas
Quadraticcurveto () Create two Bezier curves
Beziercurveto () Create three-cubic Bezier curve
Arc () Create ARC/curve (used to create circular or partial circles)
ArcTo () creates an arc/curve between two tangents
Ispointinpath () returns True if the specified point is in the current path, otherwise false
Transformation
Method description
Scale () scales the current drawing to a larger or smaller
Rotate () rotates the current drawing
Translate () remap the (0,0) position on the canvas
Transform () replaces the current transformation matrix of the drawing
SetTransform () resets the current transformation to the unit matrix. Then run transform ()
Text
Property Description
Font Sets or returns the current font property of the text content
TextAlign Sets or returns the current alignment of text content
Textbaseline Sets or returns the current text baseline that is used when drawing text
Method description
Filltext () Draw "filled" text on canvas
Stroketext () Draw text on canvas (no fill)
Measuretext () Returns the object that contains the specified text width
Image rendering
Method description
DrawImage () Drawing an image, canvas, or video to the canvas
Pixel operation
Property Description
Width returns the widths of the ImageData objects
Height returns the altitude of the ImageData object
Data returns an object that contains the image data for the specified ImageData object
Method description
Createimagedata () to create a new, blank ImageData object
Getimagedata () returns the ImageData object, which copies the pixel data for the rectangle specified on the canvas
Putimagedata () Put the image data (from the specified ImageData object) back onto the canvas
Synthesis
Property Description
Globalalpha Sets or returns the current alpha or transparent value of a drawing
Globalcompositeoperation Sets or returns how a new image is drawn to an existing image
Other
Method description
Save () Saves the state of the current environment
Restore () returns the previously saved path state and properties
CreateEvent ()
GetContext ()
Todataurl ()
Math and date, Ajax, canvas
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
