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>
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
