Html5-Canvas can draw various graphics on the web

Source: Internet
Author: User

Comments: In html5, I think the most important thing is to introduce Canvas so that we can draw various images on the web, while Canvas is pixel-based. Canvas is an html node equivalent to a drawing board. We must operate the drawing using js. In html5, I think the most important thing is to introduce Canvas so that we can draw various images on the web. It makes us feel a bit vague about web and desktop applications. Xml-based drawings, such as VML and SVG, are also available on the web outside html5. Canvas is a pixel-based drawing. Canvas is an html node equivalent to a Canvas. We must operate the drawing using js.
As follows::
<Canvas id = "myCanvas" width = "600" height = "300"> your browser does not support </canvas> definition.
We can obtain the canvas object var c = document. getElementById ("myCanvas"). Its js attributes are listed as follows:
1: Draw a rendering object, C. getContext ("2d"), get 2d drawing object, no matter how many times we call get object will be the same object.
2: Drawing Method:
ClecrRect (left, top, width, height) clears the rectangular area,
FillRect (left, top, width, height) draws a rectangle and fills it with fillStyle.
FillText (text, x, y) draws text;
StrokeRect (left, top, width, height) draws a rectangle and draws a boundary with strokeStyle.
BeginPath (): enables path painting and resets the path to the initial state;
ClosePath (): When the draw path ends, it draws a closed interval and adds a closed curve from the start position to the current coordinate;
MoveTo (x, y): sets the actual coordinate of the drawing.
LineTo (x, y); draws a straight line from the current location to x and y.
Fill (), stroke (), clip (): fill and border outlines at the end of the painting, in the editing area.
Arc (): draw an arc, and specify the position and size of the arc Based on the center, start radians, and end radians;
Rect (): rectangular path;
DrawImage (Imag img): draws an image;
QuadraticCurveTo (): quadratic spline curve path. Two control points are provided;
BezierCurveTo (): three control points of the besell curve and parameters;
CreateImageData, getImageData, and putImageData are pixel data in the Canvas. ImageData is the record width, height, and data, where data is the record of our Pigment
So the length of the array is width * height * 4, and the order is rgba. GetImageData is used to obtain the pixels of the rectangle area, while putImageData is used to set the pixels of the rectangle area;
... And so on!
3: Coordinate Transformation:
Translate (x, y): Translation transformation. The origin point is moved to the coordinate (x, y );
Rotate (a): Rotation Transformation, rotating the degree angle;
Scale (x, y): scaling transformation;
Save (), restore (): provides and restores the drawing status with a stack. save pushes the current drawing status into the stack, restore the stack, and restore the drawing status;
... And so on!
Okay, it's too late. With my test code ,:

The Code is as follows:
<Html>
<Head>
</Head>
<Body>
<Canvas id = "myCanvas" width = "600" height = "300"> your browser does not support it yet </canvas>
<Script type = "text/javascript">
Var width, height, top, left;
Width = height = 100;
Top = left = 5;
Var x = 10;
Var y = 10;
Var c = document. getElementById ("myCanvas ");
Var maxwidth = c. width-5;
Var maxheight = c. height-5;
Var cxt = c. getContext ("2d ");
Cxt. strokeStyle = "# 00f ";
Cxt. strokeRect (0, 0, c. width, c. height );
Var img = new Image ();
Img. src = "1.gif ";
Var MyInterval = null;
Start ();
Function Refresh (){
Cxt. clearRect (left, top, width, height );
If (left + x)> (maxwidth-width) | left + x <0 ){
X =-x;
}
If (top + y)> (maxheight-height) | top + y <0 ){
Y =-y;
}
Left = left + x;
Top = top + y;
Cxt. drawImage (img, left, top, width, height );
Cxt. font = "20pt ";
Cxt. fillText ("wolf", left, top + 25 );
}
Function start (){
If (MyInterval = null ){
MyInterval = setInterval ("Refresh ()", 100 );
}
}
Function stop (){
If (MyInterval! = Null ){
ClearInterval (MyInterval );
MyInterval = null;
}
}
Function InRectangle (x, y, rectx, recty, rwidth, rheight ){
Return (x> = rectx & x <= rectx + rwidth) & (y> = recty & y <= recty + rheight)
}
C. onmouseover = function (e ){
If (InRectangle (e. clientX, e. clientY, left, top, width, height )){
Stop ();
}
C. onmouseout = function (e ){
Start ();
}
C. onmousemove = function (e ){
If (InRectangle (e. clientX, e. clientY, left, top, width, height )){
If (MyInterval! = Null ){
Stop ();
}
} Else {
Start ();
}
}
}
</Script>
</Body>
</Html>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.