HTML5 canvas (line, gradient), html5 canvas line gradient
When drawing a straight line, the moveTo and lineTo methods are generally 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="300" height="160">：
Note:
(1) moveTo (x, y );
This method is used to move the cursor to the specified coordinate point. When a straight line is drawn, this coordinate point is used as the starting point;
(2) lineTo (x, y );
This method draws a straight line between the start point 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="300" height="100">：
Note:
(1) cxt. createLinearGradient (xStart, yStart, xEnd, yEnd );
XStart is the abscissa of the starting position of the gradient, yStart is the ordinate of the starting position of the gradient, xEnd is the abscissa of the Ending position of the gradient, and yEnd is the ordinate of the Ending position of the gradient.
(2) cxt. addColorStop (offset, color );
This method can append the gradient color, because it is a gradient, so at least two addColorStop methods need to be used to append two colors (start color and end color), you can append multiple colors, for example, "gradient from blue to white, then gradient to green ". The distance between the blue start point coordinate and the white end point coordinate is the same as the distance from the white start point to the green end point coordinate. At this time, the blue displacement is 0 and the white displacement is 0.5, the green displacement is 1.
Offset is the offset of the set color to exit the gradient start point. The parameter value is a floating point value ranging from 0 to 1. the offset of the gradient start point is 0, the offset of the gradient end point is 1; color is the color used for painting;
Draw radial gradient
Case 1:
<! DOCTYPE html>
<Html>
<Head lang = "en">
<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 (400,300 );
}
</Script>
</Head>
<Body onload = "draw ()">
<Canvas id = "myCanvas" width = "320" height = "320">:
Note:
(1) cxt. createRadialGradient (xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd );
This method uses six parameters. xStart is the center abscissa of the starting circle of the gradient, yStart is the center column coordinate of the starting circle of the gradient, and radiusStart is the radius of the starting circle, xEnd is the abscissa of the center of the gradient ending circle, yEnd is the ordinate of the center of the gradient ending circle, and radiusEnd is the radius of the ending circle.
In this method, the size and position of the two circles are specified respectively. From the center of the first circle to the outer contour of the second circle.
(2) Use addColorStop to set the color, which is the same as the linear gradient. You also need to set the floating point between 0 and 1 as the offset of the gradient turning point.
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
