Html5 canvas entry post

Source: Internet
Author: User

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

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.