HTML5 Image Rendering (I): Question about the canvas Element leading the next generation of web pages

Last Update:2013-10-14 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Comments: HTML5 adds an element canvas for plotting. In fact, it is similar to div (in fact, it should belong to inline-block) and provides many interfaces, this allows you to easily draw rectangular frames and garden triangles.Canvas elements first recognized

HTML5 adds an element canvas for plotting. In fact, it is similar to div (in fact, it should belong to inline-block) and provides many interfaces, this allows you to easily draw rectangular frames and garden triangles.

PS: HTML5 New Elements

After the last two days of study, I think HTML5 is still html4. there is no big difference between the two. It is nothing more than adding new things.
I think the real significance of HTML5 is that we can do more things with javascript, And we can implement better products with javascript. For example, HTML5 solves the problem of cross-origin, real-time communication API, and the reason why HTML5 is called html5. I think it is epoch-making, for example, he makes it possible for us to develop games using web pages. For example, it is a legend that he makes only Internet Explorer on the desktop of a computer (too exaggerated)

Draw Rectangular Box

Let's go straight to the question and draw a rectangle. Here we provide a color selector for you to easily select a color. PS: It's really troublesome to do jquery programming now...

Problem: Define the style and define the height and width

As a result, I encountered a problem. Here I will take a screenshot:

The Code is as follows:
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script type = "text/javascript">
Function draw (){
// Obtain the canvas object
Var canvas = document. getElementById ('canvas ');
If (canvas = null ){
Return false;
}
Var context = canvas. getContext ('2d ');
Context. fillStyle = '# 99d9ea ';
Context. fillRect (0, 0,300,200); // fill the canvas to end

Context. strokeStyle = 'red ';
Context. fillStyle = 'Gray ';
Context. lineWidth = 1;
Context. fillRect (10, 10,100,100 );
Context. strokeRect (10, 10,100,100 );

Context. clearRect (20, 20, 20, 20 );
}
</Script>
</Head>
<Body>
<Canvas id = "canvas" width = 300 height = "200" style = "border: 1px solid black; width: 300px; height: 200px;">
</Canvas>

<Button onclick = "draw ();">
Draw a rectangle </button>
<Input type = "color"/>
</Body>
</Html>

In each case, the canvas element is shown in the figure 1 when width and height are set. In Figure 20, the conditions specified by style are as follows:

We can see that for canvas, it is better to honestly define the height and width. Don't use the style silly. Of course, this problem requires actual research to reach the final conclusion.

Now let's take a look at the method of drawing a rectangle:

PS: Actually, it is much easier to use this method by encapsulating this function.

1. Use the getElementById method to obtain the drawn object. 2. Get the context getContext ('2d '). This is a fixed method. 3. Specify the filled color fillStyle and the drawn color strokeStyle, that is, the color inside and the border color 4, specify the linewidth5 line width, fill/draw fillRect/strokeRect parameter is x, y, width, height6, if you want to make one transparent, use clearRect

At this point, the rectangle will be drawn temporarily.

Draw a circle

Now let's draw a circle. Here we will start to draw a circle. In fact, I used to write a circle in Javascript. Here I also paste it to see it:

The Code is as follows:
I drew circles in pure js.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Style type = "text/css">
Div
{
Position: absolute;
Width: 1px;
Height: 1px;
Line-height: 1px;
}
</Style>
<Script src = "http://www.cnblogs.com/jquery-1.7.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
// X2 + y2 = r2;
$ (Document). ready (function (){
// First draw x, y
Var box = $ ('# box ');
Var NUM = 200;
Var R = NUM/2;
Var RR = R * R;
For (var I = 0; I <= NUM; I = I + 6 ){
// Var divX = $ ('<div style = "left:' + I + 'px; top: '+ R + 'px;"> * </div> ')
// Var divY = $ ('<div style = "top:' + I + 'px; left: '+ R + 'px;"> * </div> ')

Var ti = I;
// Sqrt (x)
If (ti> R ){
Ti = ti-R;
Var ty = Math. sqrt (RR-ti * ti ));
Var y = $ ('<div style = "left:' + (R-ty) + 'px; top: '+ I +' px; "> * </div> ')
Var y1 = $ ('<div style = "left:' + (R + ty) + 'px; top: '+ I +' px; "> * </div> ')
Box. append (y );
Box. append (y1 );
} Else if (ti <R ){
Ti = R-ti;
Var ty = Math. sqrt (RR-ti * ti ));
Var y = $ ('<div style = "left:' + (R-ty) + 'px; top: '+ I +' px; "> * </div> ')
Var y1 = $ ('<div style = "left:' + (R + ty) + 'px; top: '+ I +' px; "> * </div> ')
Box. append (y );
Box. append (y1 );
}
// Box. append (divX );
// Box. append (divY );
}

For (var I = 0; I <= NUM; I = I + 6 ){
// Var divX = $ ('<div style = "left:' + I + 'px; top: '+ R + 'px;"> * </div> ')
// Var divY = $ ('<div style = "top:' + I + 'px; left: '+ R + 'px;"> * </div> ')
Var ti = I;
// Sqrt (x)
If (ti> R ){
Ti = ti-R;
Var ty = Math. sqrt (RR-ti * ti ));
Var y = $ ('<div style = "top:' + (R-ty) + 'px; left: '+ I +' px; "> * </div> ')
Var y1 = $ ('<div style = "top:' + (R + ty) + 'px; left: '+ I +' px; "> * </div> ')
Box. append (y );
Box. append (y1 );
} Else if (ti <R ){
Ti = R-ti;
Var ty = Math. sqrt (RR-ti * ti ));
Var y = $ ('<div style = "top:' + (R-ty) + 'px; left: '+ I +' px; "> * </div> ')
Var y1 = $ ('<div style = "top:' + (R + ty) + 'px; left: '+ I +' px; "> * </div> ')
Box. append (y );
Box. append (y1 );
}
}
});

</Script>
</Head>
<Body>
<Div id = "box" style = "width: 504px; height: 504px; position: relative; top: 20px;
Left: 300px; border: 0px solid black; ">
</Div>
</Body>
</Html>

In other words, he is still relatively round...

Enter the subject

The circle and sine plot will certainly be calculated, so it is a little complicated:

① Create a path

② Create a graphic path

③ Close the path after creating the path

④ Call method for setting the drawing style

The Code is as follows:
I am a circle
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script type = "text/javascript">
Function draw (){
// Obtain the canvas object
Var canvas = document. getElementById ('canvas ');
If (canvas = null ){
Return false;
}
Var context = canvas. getContext ('2d ');
Context. fillStyle = '# 99d9ea ';
Context. fillRect (0, 0,300,200); // fill the canvas to end
For (var I = 0; I <5; I ++ ){
Context. beginPath ();
Context. arc (I * 25, I * 25, I * 10, 0, Math. PI * 2, true );
Context. closePath ();
Context. strokeStyle = 'red ';
Context. fill ();
}
}
</Script>
</Head>
<Body>
<Canvas id = "canvas" width = "300" height = "200">
</Canvas>

<Button onclick = "draw ();">
Draw circles </button>
<Input type = "color"/>
</Body>
</Html>

Let's see if there is no problem in the circle painting process, but it is worth considering the creation of the circle path:

There are many parameters in the arc method. The arc method starts with the xy radius (we generally like the angle, so we want to convert it) and ends with the arc clockwise or clockwise.
For other reasons, we will focus on the starting and ending points, because I didn't understand them at the beginning, but later I found that he was actually quite simple... It is the starting and ending angle. It is the same as our high school knowledge, except that the unit is converted to Math. PI/180 ....
I still didn't make it clear. By the way, do you remember that we drew a circle in high school, except for the circular gauge and a semi-circular ruler at the angle of the metering triangle? The angle I want to talk about is that... It's too bad!
It seems that the rightmost is 0 degrees, the vertical is 90 degrees, and the horizontal is 180 degrees. Now let's take a look.

The Code is as follows:
Clockwise timing needle
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script type = "text/javascript">
Function draw (){
// Obtain the canvas object
Var canvas = document. getElementById ('canvas ');
If (canvas = null ){
Return false;
}
Var context = canvas. getContext ('2d ');
Context. fillStyle = '# 99d9ea ';
Context. fillRect (0, 0,400,300); // fill the canvas to end
 
Context. beginPath ();
Context. arc (80, 80, 50, 0,180 * Math. PI/180, true );
Context. closePath ();
Context. fillStyle = 'Gray ';
Context. fill ();
 
Context. beginPath ();
Context. arc (180,180, 50, 0,180 * Math. PI/180, false );
Context. closePath ();
Context. fillStyle = 'Gray ';
Context. fill ();
 
 
}
</Script>
</Head>
<Body>
<Canvas id = "canvas" width = "400" height = "300">
</Canvas>
     
<Button onclick = "draw ();">
Draw circles </button>
<Input type = "color"/>
</Body>
</Html>
 
We found that the timing needle is different from the counter-clockwise,
 context.arc(180, 180, 50, 90 * Math.PI / 180, 290 * Math.PI / 180, true);
Forgive me for thinking for half an hour. I even searched for high school materials ....
So I seem to understand something ......
MoveTo and lineToCurrent experiment results:

The Code is as follows:
Twice moveto
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script type = "text/javascript">
Function draw (){
// Obtain the canvas object
Var canvas = document. getElementById ('canvas ');
If (canvas = null ){
Return false;
}
Var context = canvas. getContext ('2d ');
Context. fillStyle = '# 99d9ea ';
Context. fillRect (0, 0,300,200); // fill the canvas to end
 
Context. beginPath ();
Context. fillStyle = 'Gray ';
Context. strokeStyle = 'black ';
 
Context. moveTo (10, 10 );
Context. lineTo (150,150 );
 
Context. moveTo (10, 10 );
Context. lineTo (10,150 );
 
Context. closePath ();
Context. fill ();
Context. stroke ();
 
}
</Script>
</Head>
<Body>
<Canvas id = "canvas" width = "300" height = "200">
</Canvas>
     
<Button onclick = "draw ();">
Draw </button>
<Input type = "color"/>
</Body>
</Html>
 

The Code is as follows:
One moveto
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script type = "text/javascript">
Function draw (){
// Obtain the canvas object
Var canvas = document. getElementById ('canvas ');
If (canvas = null ){
Return false;
}
Var context = canvas. getContext ('2d ');
Context. fillStyle = '# 99d9ea ';
Context. fillRect (0, 0,300,200); // fill the canvas to end
 
Context. beginPath ();
Context. fillStyle = 'Gray ';
Context. strokeStyle = 'black ';
 
Context. moveTo (10, 10 );
Context. lineTo (150,150 );
 
// Context. moveTo (10, 10 );
Context. lineTo (10,150 );
 
Context. closePath ();
Context. fill ();
Context. stroke ();
 
}
</Script>
</Head>
<Body>
<Canvas id = "canvas" width = "300" height = "200">
</Canvas>
     
<Button onclick = "draw ();">
Draw </button>
<Input type = "color"/>
</Body>
</Html>


The Code is as follows:
Three moveto
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script type = "text/javascript">
Function draw (){
// Obtain the canvas object
Var canvas = document. getElementById ('canvas ');
If (canvas = null ){
Return false;
}
Var context = canvas. getContext ('2d ');
Context. fillStyle = '# 99d9ea ';
Context. fillRect (0, 0,300,200); // fill the canvas to end
 
Context. beginPath ();
Context. fillStyle = 'Gray ';
Context. strokeStyle = 'black ';
 
Context. moveTo (10, 10 );
Context. lineTo (150,150 );
 
Context. moveTo (10, 10 );
Context. lineTo (10,150 );
 
Context. moveTo (10,150 );
Context. lineTo (150,150 );
 
Context. closePath ();
Context. fill ();
Context. stroke ();
 
}
</Script>
</Head>
<Body>
<Canvas id = "canvas" width = "300" height = "200">
</Canvas>
     
<Button onclick = "draw ();">
Draw </button>
<Input type = "color"/>
</Body>
</Html>

The above code is almost the same, but the results are different:
In my opinion, after using moveto, it is equivalent to opening a new vertex. If we only use lineto, it will link several vertices. If it can form a graph, it will have a middle color.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

HTML5 Image Rendering (I): Question about the canvas Element leading the next generation of web pages

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

HTML5 Image Rendering (I): Question about the canvas Element leading the next generation of web pages

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support