Home > Developer > Web Develop
When drawing a straight line, there are two methods of moveto and lineto commonly used.
Case 1:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<script>
function Draw () {
var C=document.getelementbyid ("MyCanvas");
var cxt= c.getcontext ("2d");
Cxt.moveto (10,10);
Cxt.lineto (250,100);
Cxt.lineto (10,100);
Cxt.stroke ();
}
</script>
<body onload= "Draw ()" >
<canvas id= "MyCanvas" width= "height=" </canvas> "style= solid #dddddd" > Your browser is not supported
</body>
：
Comments:
(1) moveTo (x, y);
The function of this method is to move the cursor to the specified coordinate point, and draw the line with this coordinate point as the starting point;
(2) LineTo (x, y);
The method draws a straight line between the beginning of the line specified in the MoveTo method and the end point of the line specified in this parameter;
Draw a linear gradient
Case 1:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<script>
function Draw () {
var C=document.getelementbyid ("MyCanvas");
var cxt= c.getcontext ("2d");
var grd=cxt.createlineargradient (0,0,175,50);
Grd.addcolorstop (0, "#ff0000");
Grd.addcolorstop (1, "#00ff00");
CXT.FILLSTYLE=GRD;
Cxt.fillrect (0,0,175,50);
}
</script>
<body onload= "Draw ()" >
<canvas id= "MyCanvas" width= "height=", style= "border:1px solid #dddddd" > your browser does not support </canvas>
</body>
：
Comments:
(1) cxt.createlineargradient (Xstart, Ystart, XEnd, yend);
The Xstart is the horizontal axis of the starting position of the gradient, the Ystart is the ordinate of the starting place of the gradient, the xend is the horizontal axis of the gradient end Place, yend ordinate.
(2) Cxt.addcolorstop (offset, color);
The method can append the color of the gradient, because it is a gradient, so you need to use at least two times Addcolorstop method to append two colors (start and end colors), you can append multiple colors, such as "from blue gradient to white, then to green". The distance between the blue start point coordinates and the white endpoint coordinates is equal to the distance between the white start point and the green endpoint coordinates , when the blue displacement is 0, the white displacement is 0.5, and the green displacement is 1.
offset for the specified color away from the start point of the gradient, the parameter value is a floating-point value ranging from 0 to 1, the gradient start point bias shift to 0, offset of gradient end point The color to use when drawing for 1;color;
Draw a radial gradient
Case 1:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<script>
function Draw () {
var C=document.getelementbyid ("MyCanvas");
var cxt= c.getcontext ("2d");
var grd=cxt.createradialgradient (150,150,0,150,150,100);
Grd.addcolorstop (0.1, "#ff0000");
Grd.addcolorstop (1, "#00ff00");
CXT.FILLSTYLE=GRD;
Cxt.fillrect (0,0,400,300);
}
</script>
<body onload= "Draw ()" >
<canvas id= "MyCanvas" width= "" "height=" "style= solid #dddddd" > your browser does not support </canvas>
</body>
：
Comments:
(1) cxt.createradialgradient (Xstart, Ystart, Radiusstart, XEnd, Yend, radiusend);
The method uses six parameters, Xstart is the center axis of the beginning circle of the gradient, the Ystart is the center ordinate of the beginning circle of the gradient, the Radiusstart is the radius of the beginning circle, Xend is the center axis of the gradient end circle, and Yend is the center ordinate of the gradient end circle. Radiusend is the radius of the end circle.
In this method, the size and position of the two circles are specified separately. Spreads the gradient outward from the center of the first circle, spreading to the outer contour of the second circle.
(2) When setting the color, the same as the linear gradient, using the Addcolorstop method to set. It is also necessary to set the floating point number between 0-1 as the offset of the gradient turning point.
HTML5 Canvas (lines, gradients)
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
