Canvas is a newly added HTML 5 label for graphic processing. canvas can be used to perform most graphic operations.
Some basic operations of canvas are similar to other graphic programming tools, including border, path painting and filling of various shapes, canvas attribute adjustment, style adjustment, etc.
Next, we will introduce them in detail as much as possible, so that a newbie can easily understand them.
I. canvas Environment Construction
Enter the html editing environment.
Add a canvas label to the body
[Html]
<Body>
<Canvas id = "canvas1" width = "400px" height = "200px"> </canvas> <br/>
</Body>
This completes the laying of a canvas, but this is far from enough. You must do some work before using the canvas, including variable Association and context creation.
[Html]
$ (Document). ready (
Function (){
Var canvas = $ ("# canvas1"); // variable Association
Var context = canvas. get (0). getContext ("2d"); // create a context
Context. clearRect (400,200,); // draw a rectangle
<Span style = "white-space: pre"> </span>}
);
2. There are many ways to draw images. Several typical methods are as follows:
[Html]
Context. fillRect (20, 20, 100,100); // fill
Context. strokeRect (100,100,); // border
[Html]
<Span style = "white-space: pre"> </span> context. beginPath ();
Context. strokeRect (30,100, 50, 50); // sketch the path
Context. closePath ();
Context. stroke (); // path usage
[Html]
<Span style = "white-space: pre"> </span> context. beginPath ();
Context. arc (155,125, 1.5, Math. PI *, false); // circle (fan)
// Context. arc (x, y, radius, start angle, end angle, and clockwise)
Context. closePath ();
Context. fillStyle = "# ffff00"; // adjust the style
Context. fill ();
[Html]
<Span style = "white-space: pre"> </span> var text = "hello world! ";
Context. font = "35px italic serif"; // Set font attributes
Context. fillText (text, 60,100 );
[Html]
<Span style = "white-space: pre"> </span> canvas. attr ("width", 400); // modify the canvas size.
Canvas. attr ("height", 20 );
[Html]
Context. clearRect (, canvas. width (), canvas. height (); // modify the canvas size
Iii. examples. The following provides a complete demo source code for various basic canvas applications.
[Html]
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> canvas concise tutorial (1) </title>
<Script type = "text/javascript" src = "http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"> </script>
<Script language = "javascript">
$ (Document). ready (
Function (){
Init ();
}
);
Function clear1 (){
Var canvas = $ ("# canvas1"); // variable Association
Var context = canvas. get (0). getContext ("2d ");
Context. clearRect (0, 0, 400,200 );
}
Function clear2 (){
Var canvas = $ ("# canvas2"); // variable Association
Var context = canvas. get (0). getContext ("2d ");
Context. clearRect (0, 0, 400,200 );
}
Function clear3 (){
Var canvas = $ ("# canvas3"); // variable Association
Var context = canvas. get (0). getContext ("2d ");
Context. clearRect (0, 0, 400,200 );
}
Function clear4 (){
Var canvas = $ ("# canvas4"); // variable Association
Var context = canvas. get (0). getContext ("2d ");
Context. clearRect (0, 0, canvas. width (), canvas. height ());
}
Function clear5 (){
Var canvas = $ ("# canvas5"); // variable Association
Var context = canvas. get (0). getContext ("2d ");
Canvas. attr ("width", $ (window). get (0). innerWidth );
Canvas. attr ("height", $ (window). get (0). innerHeight );
Context. fillRect (0, 0, canvas. width (), canvas. height ());
}
Function init (){
Var canvas = $ ("# canvas1"); // variable Association
Var context = canvas. get (0 ). getContext ("2d"); // create a context. You should be familiar with MFC image processing, that is, create a matching environment in the memory.
Context. fillRect (20, 20, 100,100 );
Context. strokeRect (100,100 );
Canvas =$ ("# canvas2 ");
Var context = canvas. get (0). getContext ("2d"); // This sentence is required; otherwise, the painting result remains in the front element.
Context. beginPath ();
Context. moveTo (30,30 );
Context. lineTo );
Context. closePath ();
Context. stroke ();
Context. beginPath ();
Context. strokeRect (30,100, 50, 50 );
Context. closePath ();
Context. stroke (); // This stroke is the meaning of the pen, only draw
Context. beginPath ();
Context. arc (155,125, 20, 0, Math. PI * 1.5, false );
// Context. arc (x, y, radius, start angle, end angle, and clockwise)
Context. closePath ();
Context. fill (); // This fill is fully filled
Canvas =$ ("# canvas3 ");
Var context = canvas. get (0). getContext ("2d"); // This sentence is required; otherwise, the painting result remains in the front element.
Context. lineWidth = 5;
Context. strokeStyle = "# ff0000"; // The change takes effect permanently.
Context. beginPath ();
Context. strokeRect (30,100, 50, 50 );
Context. closePath ();
Context. stroke (); // This stroke is the meaning of the pen, only draw
Context. beginPath ();
Context. arc (155,125, 20, 0, Math. PI * 1.5, false );
// Context. arc (x, y, radius, start angle, end angle, and clockwise)
Context. closePath ();
Context. fillStyle = "# ffff00 ";
Context. fill (); // This fill is fully filled
Canvas =$ ("# canvas4 ");
Var context = canvas. get (0). getContext ("2d"); // This sentence is required; otherwise, the painting result remains in the front element.
Var text = "hello world! ";
Context. font = "35px italic serif ";
Context. fillText (text, 60,100 );
Canvas =$ ("# canvas5 ");
Var context = canvas. get (0). getContext ("2d"); // This sentence is required; otherwise, the painting result remains in the front element.
Canvas. attr ("width", 400 );
Canvas. attr ("height", 20 );
}
</Script>
<Style>
Body {margin: 0 auto ;}
Canvas {border: red 1px dashed ;}
</Style>
</Head>
<Body>
<Input type = "button" onClick = "init ()" value = "click to redraw all"/>
<H6> canvas 1 rectangular drawing: <Canvas id = "canvas1" width = "400px" height = "200px"> </canvas> <br/>
<Input type = "button" onClick = "clear1 ()" value = "click to erase"/>
<H6> canvas 2 path painting: <Canvas id = "canvas2" width = "400px" height = "200px"> </canvas> <br/>
<Input type = "button" onClick = "clear2 ()" value = "click to erase"/>
<H6> canvas 3 color and line Width Adjustment: <Canvas id = "canvas3" width = "400px" height = "200px"> </canvas> <br/>
<Input type = "button" onClick = "clear3 ()" value = "click to erase"/>
<H6> canvas 4 text drawing: <Canvas id = "canvas4" width = "400px" height = "200px"> </canvas> <br/>
<Input type = "button" onClick = "clear4 ()" value = "click to erase"/>
<H6> canvas 5: change a canva attribute value and erase it <Canvas id = "canvas5" width = "400px" height = "20px"> </canvas> <br/>
<Input type = "button" onClick = "clear5 ()" value = "click to enlarge and smear"/>
<Br/>
<Input type = "button" onClick = "init ()" value = "click to redraw all"/>
</Body>
</Html>
By goodcat12
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
