First, let's look at a first-line effect chart:
Core content:
Draws a path. moveTo.lineTo.bezierCurveTo
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<script>
function Draw (ID) {
var Canvas=document.getelementbyid (ID);
var Context=canvas.getcontext ("2d");
Context.fillstyle= "#eeeeef";
Context.fillrect (0,0,300,400);//Draw Rectangle
var dx=150;
var dy=150
var s=100;
Context.beginpath ()//Start drawing
Context.fillstyle= "RGB (100,250,100)";
Context.strokestyle= "RGB (0,0,100)";//shape border style
var x=math.sin (0);
var y=math.cos (0);
var dig=math.pi/15*11;
for (Var i=0;i<30;i++) {
X=math.sin (I*dig);
Y=math.cos (I*dig);
Context.lineto (dx+s*x,dy+s*y);//Draw Straight line
}
Context.closepath ();
Context.fill ();
Context.stroke ();
}
</script>
<body onload= "Draw (' canvas ')" >
<canvas id= "Canvas" height= "400px" width= "300px" ></canvas>
</body>
Example 2,canvas Draw a circle
HTML5 draws a circle, which consists of four steps, starts creating the path, creates the path to the shape, completes the path creation, closes the path and sets the drawing style, invokes the drawing method, and draws the path.
The code is as follows:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title></title>
<script>
function Draw (ID) {
var Canvas=document.getelementbyid (ID);
if (canvas==null) {
return false;
}
var Context=canvas.getcontext ("2d");
Context.fillstyle= "Aqua";
Context.fillrect (0,0,600,700);//Draw Rectangle
for (Var i=0;i<=10;i++) {
Context.beginpath ();//create Path
Context.arc (i*10,i*10,i*5,0,math.pi*2,true);
i*25,i*25 x, y coordinate, i*10 radius, 0 starting angle, pi*2 radians, False = clockwise, true = counterclockwise.
Context.closepath ()//Be sure to close the path
Context.fillstyle= "Rgba (255,0,0,0.25)";
Context.fill ();
}
}
</script>
<body onload= "Draw (' MyCanvas ')" >
<canvas id= "MyCanvas" width= "300px" height= "200px" ></canvas>
</body>
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
