html5-Canvas can draw various graphics in the web_html5 tutorial skills

I think the most important thing in HTML5 is the introduction of Canvas, which allows us to draw various graphics on the web. It feels like this alone is a bit blurry between our web and desktop programs. There are also xml-based drawings in the web outside HTML5, such as VML and SVG. Canvas is pixel-based drawing. Canvas is an html node equivalent to a drawing board. We must use js to operate drawing.
As follows:
Your browser does not support the definition yet.
We can get the canvas object as var c=document.getElementById("myCanvas"); its js attribute methods are listed below:
1: Draw the rendering object , c.getContext(" 2d"), to get the 2d drawing object, the object obtained will be the same object no matter how many times we call it.
2: Drawing method :
clecrRect(left,top,width,height) clears the specified rectangular area,
fillRect(left,top,width,height) draws the rectangle, and fillStyle fill.
fillText(text,x,y) draws text;
strokeRect(left,top,width,height) draws a rectangle and draws the border with strokeStyle.
beginPath(): Start the drawing of the path and reset the path to the initial state;
closePath(): The drawing of the path ends. It will draw a closed interval and add a closed curve from the starting position to the current coordinates. ;
moveTo(x, y): Set the actual coordinates of the drawing.
lineTo(x, y); Draw a straight line from the current actual position to x, y.
fill(), stroke(), clip(): After completing the final fill and border outline of the drawing, clip the area.
arc(): draw an arc, center position, starting radian, and ending radian to specify the position and size of the arc;
rect(): rectangular path;
drawImage (Imag img): draw an image;
quadraticCurveTo(): ​​Quadratic spline path, parameter two control points;
bezierCurveTo(): ​​Bezier curve, parameter three control points;
createImageData, getImageData, putImageData: Canvas Medium pixel data. ImageData records width, height, and data data, where data is the record of our pigment as
argb, so the array size length is width*height*4, and the order is rgba. getImageData is to get the pixels of the rectangular area, and putImageData is to set the pixels of the rectangular area;
… and so on!
3: Coordinate transformation :
translate (x, y): translation transformation, the origin moves to coordinates (x, y);
rotate (a): rotation transformation, rotate a degree angle;
scale (x, y): scaling transformation;
save(), restore(): provide and a stack to save and restore the drawing state, save pushes the current drawing state into the stack, restore pops the stack , restore the drawing state;
… and so on!
Okay, it’s too late. Attached is my test code:

Copy code

The code is as follows:

< html>



Your browsing The browser does not support it yet