Draw Rectangle (square):
var bg = document.getElementById (' Caibaojian ');
var ctx = Bg.getcontext (' 2d ');
Ctx.beginpath ();
Solid
Ctx.fillstyle= "#0000ff"; Color of fills
Ctx.fillrect (20,20,100,100); Rectangular starting point (20,20), length 100, Width 100
Hollow
Ctx.linewidth = 10;//Border is 10px
Ctx.strokestyle = ' #00ff00 ';//The color drawn is #00ff00
Ctx.strokerect (20,20,100,100);
If you do not use a rectangle, you can also draw it by LineTo ()
Ctx.moveto (20,20);
Ctx.lineto (100,20);
Ctx.lineto (100,100);
Ctx.lineto (20,100);
Ctx.closepath ();
Ctx.stroke (); Draw a hollow
Ctx.fill (); Fill Draw Circle/ring
There is also a unique method in canvas.
Arc (x,y,r,sangle,eangle,counterclockwise); The center point is (x,y), the radius is R, the starting point is Sangle, the endpoint is eangle, counterclockwise direction.
Draw a half arc
var bg = document.getElementById (' Caibaojian ');
var ctx = Bg.getcontext (' 2d ');
Ctx.beginpath ();
at (100,100) counterclockwise draw a radius of 50, angle from 0 to 180° arc
Ctx.arc (100,100,50,0*math.pi,1*math.pi,true);
ctx.linewidth=10;
ctx.strokestyle= ' #00ff00 ';
var grd = ctx.createlineargradient (0,0,200,0);//left to right
Grd.addcolorstop (0, "#ff0000"); Start color
Grd.addcolorstop (1, "#00ff00"); End Color
CTX.STROKESTYLE=GRD;
Ctx.stroke (); Draw a solid circle
In (100,100) out counterclockwise draw a solid circle with a radius of 50
Ctx.arc (100,100,50,0*math.pi,2*math.pi,true);
Ctx.fill (); Draw a 3/4 arc
In (100,100) draw a clockwise 3/4 arc with a radius of 50
Ctx.arc (100,100,50,0*math.pi,1.5*math.pi,false);
Ctx.stroke ();
To draw an arc using canvas
Now we're going to draw a 1/4 arc of a circle with a radius of 50px.
<! DOCTYPE html>
<meta charset= "UTF-8" >
<TITLE>HTML5 Canvas drawing Arcs Sample </title>
<body>
<!--add a canvas label with a red border to make it easier to view on the page-->
<canvas id= "MyCanvas" width= "400px" height= "300px" style= "border:1px solid red;" >
Your browser does not support the canvas tag.
</canvas>
<script type= "Text/javascript" >
Get Canvas object (canvas)
var canvas = document.getElementById ("MyCanvas");
Simply detects if the current browser supports canvas objects to avoid prompting for syntax errors in some browsers that do not support HTML5
if (Canvas.getcontext) {
Gets the corresponding Canvasrenderingcontext2d object (brush)
var ctx = Canvas.getcontext ("2d");
Start a new drawing path
Ctx.beginpath ();
Sets the color of the arc to blue
Ctx.strokestyle = "Blue";
var circle = {
X:100,//x-axis coordinate value of center
y:100,//Y coordinate value of center
R:50//radius of the Circle
};
Draws an arc clockwise along a circle with a center of coordinates (100,100) and a radius of 50px
Ctx.arc (circle.x, Circle.y, CIRCLE.R, 0, MATH.PI/2, false);
Draws an arc according to the specified path
Ctx.stroke ();
}
</script>
</body>
The center coordinates of the circle where we set the drawn arc are (100,100) and the radius is 50px. Because the circumference of a circle with a radius of R is 2πr, that is, a complete circle whose radians are 2π (converted to a conventional angle 360°), we want to draw a 1/4 arc of the circle, as long as the radian is Π/2 (that is, 90°). In the code above, we used the constant Math.PI in JavaScript to represent π.
In addition, in the code above, we also set the direction of the drawn arc to be clockwise (false). Because the starting radian is 0 and the end Radian is Π/2, the arc is drawn clockwise from the square direction of the x-axis to get the above figure. What would be the effect if we changed the direction of the arcs in the above code to counterclockwise?
<script type= "Text/javascript" >
Get Canvas object (canvas)
var canvas = document.getElementById ("MyCanvas");
Simply detects if the current browser supports canvas objects to avoid prompting for syntax errors in some browsers that do not support HTML5
if (Canvas.getcontext) {
Gets the corresponding Canvasrenderingcontext2d object (brush)
var ctx = Canvas.getcontext ("2d");
Start a new drawing path
Ctx.beginpath ();
Sets the color of the arc to blue
Ctx.strokestyle = "Blue";
var circle = {
X:100,//x-axis coordinate value of center
y:100,//Y coordinate value of center
R:50//radius of the Circle
};
Draws an arc counterclockwise along the coordinate point (100,100) for a circle with a radius of 50px
Ctx.arc (circle.x, Circle.y, CIRCLE.R, 0, MATH.PI/2, true);
Draws an arc according to the specified path
Ctx.stroke ();
}
</script>
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
