HTML5 drawing Learning (1) -- Canvas Element introduction, html5canvas
The Canvas element is a newly added element in html5. Like its name Canvas, it is equivalent to a Canvas where we can depict various graphics.
The Graphic Type mentioned here does not mean that we can draw a visual image, but wantsUse javascriptPerform the following operations.
Here is a simple canvas instance:
1. Add the canvas element to the page.
First, add the canvas element to the page. You must specify its height, width, and unique id <! Doctype html>
<Html lang = "en"> <Script type = "text/javascript" src = "canvas. js"> </script>
</Head> <body onload = "draw ('canvas ') ">
2. Draw a rectangle
Create a rectangle in the cavas. js file:
Function draw (id) {// 1. obtain the canvas object var canvasDom = document. getElementById (id); if (canvasDom = null) {return false;} // 2. obtain the context var context = canvas. getContext ('2d '); // 3. fill and draw the border context. fillRect (0, 0,400,300); // 4. set the drawing style context. fillStyle = '# eef'; // fill color // 5. specify the line width context. lineWidth = 1; // 6. specifies the color value context. strokeStyle = 'Blue '; // set the border color // 7. draw a rectangular context. fillRect (50, 50,100,100); // fill the rectangular context. strokeRect (50, 50,100,100); // draw a rectangular border}
Final Effect
3. Draw a circle
Function drawCircle (id) {// 1. get canvas var canvasDom = document. getElementById (id); if (canvasDom = null) {return false;} // 2. obtain the context var context = canvas. getContext ('2d '); // 3. fill color context. fillStyle = "# EEF"; // 4. draw the context. fillRect (0, 0,400,300); var n = 0; for (var I = 0; I <10; I ++) {// start path context. beginPath (); // draw the circular path context. arc (I * 25, I * 25, I * 10, 0, Math. PI * 2, true); // The end path context. closePath (); // fill in the gradient context. fillStyle = "rgba (255, 0, 0, 0.25)"; // draw context. fill ();}} :
Take the timestamp before the start, and end with the re-Fetch. Evaluate the difference.
How can I use canvas in HTML5 to draw a three-dimensional pyramid image? (Javascript can)
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> MYJZT </title>
<Body onload = "draw ('canvas ')">
<Div style = "text-align: center;">
<Canvas id = "myCanvas" width = "400" height = "500" solid # c3c3c3; "> </canvas>
<Script type = "text/javascript">
Var c = document. getElementById ("myCanvas ");
Var cxt = c. getContext ("2d ");
Cxt. strokeStyle = "black ";
Cxt. beginPath ();
Cxt. moveTo (200,0 );
Cxt. lineTo (0,400 );
Cxt. lineTo (400,400 );
Cxt. lineTo (200,0 );
Cxt. moveTo (200,0 );
Cxt. lineTo (50,200 );
Cxt. lineTo (0,400 );
Cxt. moveTo (200,0 );
Cxt. lineTo (350,200 );
Cxt. lineTo (400,400 );
Cxt. closePath ();
Cxt. stroke ();
</Script>
</Body>
</Head>
</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
