Home > Developer > Web Develop
Draw a graphic with canvas
* HTML page
* Definitions <canvas> elements
* It is recommended to use the width and Height properties to set <canvas> element widths and heights
* JavaScript
* Get <canvas> elements in HTML pages
* Create Canvas objects with the GetContext () method
*rect (x,y,width,height)-Rectangle
*x,y the upper-left corner of the specified rectangle
*width,height declares its size
*fillrect (x,y,width,height)-Solid Rectangle
*strokerect (x,y,width,height)-Hollow Rectangle
*clearrect (x,y,width,height)-clears pixels of the area specified by the property, similar to a rectangular eraser
Attention
* Set the style first and then draw the graphic
* You need to reset the style every time you change the style
* Fill style and stroke style do not interfere with each other
* Set Gradient
* Linear Gradient
Createlineargradient (X1,y1,x2,y2)-Creates a linear gradient object in the canvas
* Linear gradients have a baseline
* Ray (FAN) gradient
Createradialgradient (X1,Y1,R1,X2,Y2,R2)-Creates a ray gradient object in the canvas
* Ray Gradient has two datum circles
* Draw circles or arcs with canvas
*arc (x,y,radius,startangle,endangle,direction)-round or curved
*x and Y-draws the center coordinate value of the circle
*radius-Draw the radius of the circle
*startangle-Start position
*endangle-End Position
*direction-Is it clockwise or counterclockwise?
*************************************************************************************************************** ************
Draw a rectangle with canvas
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <body>
8 <canvas id="canvas" width="500px" height="500px"></canvas>
9 </body>
10 <script>
11 var canvas=document.getElementById("canvas");
12 var context=canvas.getContext("2d")
13
14 context.beginPath();
15 context.fillStyle="#cc99ff";//Set the color of the rectangle
16 context.fillRect(100,100,300,300);//Draw a solid rectangle
17 context.closePath();
18
19 context.beginPath();
20 context.strokeStyle="#33ff66";//Set the border color of the rectangle
21 context.strokeRect(200,200,200,200); //Draw a hollow rectangle
22 context.closePath();
twenty three
24 context.beginPath();
25 context.clearRect(100,100,100,100);////Clear the pixels of the area specified by the attribute
26 context.closePath();
27 </script>
28 </html>
As follows:
Implementing linear gradients with canvas
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <body>
8 <canvas id="canvas" width="500px" height="500px"></canvas>
9 </body>
10 <script>
11 var canvas=document.getElementById("canvas");
12 var context=canvas.getContext("2d");
13
14 /*
15 * Call the createLinearGradient() method to set the gradient
16 * Set the position of the baseline by passing four parameters
17 * This method returns a linear gradient object
18 */
19 var grad=context.createLinearGradient(0,0,200,200);
20
twenty one /*
22 * Set the color of the gradient
23 * Gradient object calls the addColorStop(position, color) method to set the color
24 * position - set the position of the current color
25 * value range is 0-1
26 * color - the color of the setting
27 */
28 grad.addColorStop(0,"#ffff00");
29 grad.addColorStop(0.25,"#ff0099");
30 grad.addColorStop(0.5,"#33ff66");
31 grad.addColorStop(0.75,"#996633");
32 grad.addColorStop(1,"#660099");
33
34 //Set the fill style to a linear gradient
35 context.fillStyle=grad;
36
37 // draw a rectangle
38 context.fillRect(0,0,200,200);
39 </script>
40 </html>
As follows:
Using canvas to achieve a ray gradient
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <body>
8 <canvas id="canvas" width="500px" height="500px"></canvas>
9 </body>
10 <script>
11 var canvas = document.getElementById("canvas");
12 var context = canvas.getContext("2d");
13
14 //Set the ray gradient
15 var grad=context.createRadialGradient(canvas.width/2, canvas.height/2,50, canvas.width/2, canvas.height/2,200);
16 //Set the gradient color
17 grad.addColorStop(0,"#ffff00");
18 grad.addColorStop(0.25,"#ff0000");
19 grad.addColorStop(0.5,"#3300ff");
20 grad.addColorStop(0.75,"#99ccff");
21 grad.addColorStop(1,"#33ff00");
22 //Set the fill style to gradient
23 context.fillStyle = grad;
24 // draw a rectangle
25 context.fillRect(0,0,canvas.width,canvas.height);
26 </script>
27 </html>
As follows:
Linear and radial gradients with canvas
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>Document</title> 10 </head> 11 <body> 12 <canvas id="canvas" width="600px" height="600px"> 13 </body> 14 <script> 15 var canvas = document.getElementById("canvas"); 16 var context = canvas.getContext("2d"); 17 18 var grad=context.createLinearGradient(0,0,canvas.width,canvas.height); 19 20 grad.addColorStop(0,"#ffff00"); 21 grad.addColorStop(0.3,"#ff0099"); 22 grad.addColorStop(0.54,"#33ff66"); 23 grad.addColorStop(0.7,"#996633"); 24 grad.addColorStop(1,"#660099"); 25 26 var peekhole=context.createRadialGradient(250,250,100,250,250,250); 27 28 peekhole.addColorStop(0.0,"transparent");// 透明 29 peekhole.addColorStop(0.7,"rgba(100,100,100,0.65)");//灰色半透明 30 peekhole.addColorStop(1.0,"rgba(0,0,0,0)");//再次透明 31 32 context.fillStyle=grad; 33 context.fillRect(0,0,500,500); 34 //cxtonte.lineWidth=100; 35 context.fillRect(100,50,300,350); 36 context.fillStyle=peekhole; 37 context.fillRect(0,0,500,500); 38 39 </script> 40 </html>
As follows:
Draw a circle:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Create a path to draw a rectangle or a circle</title>
5 <meta charset="utf-8" />
6 </head>
7
8 <body>
9 <canvas id="canvas" width="400px" height="300px"></canvas>
10
11 <script>
12 var canvas = document.getElementById("canvas");
13 var context = canvas.getContext("2d");
14
15 // draw a solid circle
16 context.beginPath();
17 context.arc(170,60,50,0,Math.PI*2);
18 context.closePath();
19 context.fill();
20
21 // draw a hollow circle
22 context.beginPath();
23 context.arc(170,170,50,0,Math.PI*2);
24 context.closePath();
25 context.stroke();
26
27 // draw a solid arc
28 context.beginPath();
29 context.arc(280,60,50,0,Math.PI*3/2,false);
30 context.closePath();
31 context.fill();
32
33 // Draw a hollow arc
34 context.beginPath();
35 context.arc(280,170,50,0,Math.PI*3/2);
36 context.closePath();
37 context.stroke();
38
39 </script>
40 </body>
41 </html>
As follows:
Small case
<!DOCTYPE html>
<html>
<head>
<title>Small case</title>
<meta charset="utf-8" />
</head>
<body>
<canvas id="canvas" width="500px" height="300px"></canvas>
<script>
Var canvas = document.getElementById("canvas");
Var context = canvas.getContext("2d");
// 1. Draw a hollow circle
context.beginPath();
Context.arc(200,200,100,0,Math.PI*2);
context.closePath();
Context.stroke();
// 2. Draw a solid semicircle
context.beginPath();
Context.arc(200,200,100,Math.PI/2,Math.PI*3/2);
context.closePath();
Context.fill();
// 3. Draw a black circle
context.beginPath();
Context.arc(200,250,50,0,Math.PI*2);
context.closePath();
Context.fill();
// 4. Draw a white circle
context.fillStyle = "white";
context.beginPath();
Context.arc(200,150,50,0,Math.PI*2);
context.closePath();
Context.fill();
// 5. Draw a black and white small circle
context.beginPath();
Context.arc(200,250,20,0,Math.PI*2);
context.closePath();
Context.fill();
context.fillStyle = "black";
context.beginPath();
Context.arc(200,150,20,0,Math.PI*2);
context.closePath();
Context.fill();
</script>
</body>
</html>
*************************************************************************************************************** ************
From the zero basis of the canvas, learning a day, this is only a small part, there are many many need me to learn to understand, to tell the truth Girls Learn to write program this line is actually very tired, refueling (^ω^), I said to myself!!!
Learn HTML5 's canvas from 0 (1)
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
