Unclosed shapes are also populated
<body> <canvas id = "palette" width= "500px" height="500px ">Your browser does not support canvas labels, please upgrade your browser or change other browsers</Canvas></body></html><script> var palette = Document.queryselector ("#palette"). GetContext ("2d"); //Set the drawing environment Palette.moveto(.); Palette.arc,0,Math. PI,false); Palette.fill (); Palette.strokestyle = "#FF0000"; Palette.linewidth = 5; Palette.stroke (); </script>Here, we use ARC (X,y,r,startangle,endangle,false) to draw a semicircle. And fill, you can see that the semicircle will still be filled, but there is no line in the stroke.
Previously mentioned Closepath () is used to close the path, if we before Palette.fill (), First call Palette.closepath () it? Indeed, as we thought, the semicircle would be closed. As shown below:
Arc is used to draw a circle, in addition, we can use FillRect (x,y,w,h) to draw a solid rectangle, using Strokerect (X,Y,W,H) to draw the hollow rectangle.
<body> <canvas id = "palette" width= "300px" height="300px " style=" border:1px solid red; >Your browser does not support canvas labels, please upgrade your browser or change other browsers</Canvas></body></html><script> var palette = Document.queryselector ("#palette"). GetContext ("2d"); Palette.fillstyle = "#84FF82"; Palette.fillrect (N,+,+); </script>Previously, I used Strokestyle to modify the color of the strokes, and, similarly, use FillStyle to change the color of the fill.
The background color can use gradients, so will the canvas's fill color use a gradient change? The answer is yes. The
Canvas supports linear and radial gradients.
Createlineargradient (X1,Y1,X2,Y2);
X1,y1 is the starting coordinate point, x2,y2 is the end coordinate point
Createradialgradient (X1,Y1,R1,X2,Y2,R2);
X1,y1,r1 Inner Circle coordinate and radius
X2,Y2,R2 Outer Circle coordinates and RADIUS
Use the first step of the gradient fill to create the gradient first, taking the linear gradient as an example.
var linear = palette.createlineargradient (100,100,200,100); The
linear gradient is created, but at this point the gradient is empty, we need to fill it with Addcolorstop (Position,color), it is important to note that this color is stored on the linear, not on the brush, that is, palette.
linear.addColorStop(0,"#D5FF92");linear.addColorStop(0.5,"#FF00AE");linear.addColorStop(1,"#3B31FF");
Addcolorstop (position, color) can be multiple, but the position must be a number between 0-1, which can be two decimal places, indicating a percentage.
After we have defined the gradient, we only need to assign it to FillStyle, which is used to fill it.
Palette.fillstyle = linear;
The code is as follows:
<body><canvas id = "palette" width= "500px" height="500px ">Your browser does not support canvas labels, please upgrade your browser or change other browsers</Canvas></body></html><script> var palette = document.queryselector (" #palette "). GetContext (" 2d "); //setting the drawing environment var linear = palette.createlineargradient (100 , 100 , 200 , 100 ); Linear.addcolorstop (0 , "#D5FF92" ); Linear.addcolorstop (0.5 , "#FF00AE" ); Linear.addcolorstop (1 , "#3B31FF" ); Palette.fillstyle = linear; Palette.fillrect (0 , 0 , 300 , 300 ); </script>Our gradient is from (100,100) to (200,100), we can see that before the beginning of the gradient, the color is the starting color, and after the end of the gradient, the color is the finish color.
The above creates a horizontal gradient, in fact, we can also create a sloping gradient, as follows:
<body><canvas id = "palette" width= "500px" height=" 500px ">Your browser does not support canvas labels, please upgrade your browser or change other browsers</Canvas></body></html><script> varpalette = Document.queryselector ("#palette"). GetContext ("2d");//Set up the drawing environment varLinear = Palette.createlineargradient ( -, -, -, -); Linear.addcolorstop (0.1,"#D5FF92"); Linear.addcolorstop (0.3,"#FF00AE"); Linear.addcolorstop (0.8,"#FFDD00"); Linear.addcolorstop (1,"#3B31FF"); Palette.fillstyle = linear; Palette.fillrect ( -, -, -, -);</script>If we want to not show the color after the end point, we can add a transparent color at the end point.
Now, to try a radial gradient, we also need to use a radial gradient when drawing the solar system.
Let's start with the simplest. First, make a very normal radial gradient, that is, the center of the gradient Circle is the beginning of the gradient. Due to the normal radial gradient, the center is centered, so we should try to avoid deflection. We match the center of the end Circle with the center of the beginning circle.
var radial = palette.createRadialGradient(100,100,50,100,100,200);
Create a radial gradient
Add a color to a radial gradient
radial.addColorStop (0 , "#ff0000" ) Radial.addcolorstop (0.3 , " #FFDD00 ") Radial.addcolorstop (0.5 , " #FF36DA ") Radial.addcolorstop (0.8 , " #1A16FF ") Radial.addcolorstop (1 , "#3CFF63" )
<body> <canvas id = "palette" width= "500px" height="500px ">Your browser does not support canvas labels, please upgrade your browser or change other browsers</Canvas></body></html><script> varpalette = Document.queryselector ("#palette"). GetContext ("2d");varRadial = Palette.createradialgradient ( $, $,Ten, $, $, -); Radial.addcolorstop (0,"#ff0000"); Radial.addcolorstop (0.3,"#FFDD00"); Radial.addcolorstop (0.5,"#FF36DA"); Radial.addcolorstop (0.8,"#1A16FF"); Radial.addcolorstop (1,"#3CFF63"); Palette.fillstyle = radial; Palette.fillrect ( -, -, -, -);</script>As you can see, outside the radial gradient area, it is the end color, if we want it to be a transparent color, just add the color at 0.99, and then set the color at 1 to transparent.
The starting color of a radial gradient in a canvas is drawn outside the range of the start circle, and the entire color of the start circle is the start color.
If we set the radius of the starting circle to 0, then the "Change of heart" of the radial gradient becomes a point.
Above, we coincide with the center of the beginning and end circle, but obviously, we can also let them deviate, see how the effect:
<body><canvas id = "palette" width= "500px" height=" 500px ">Your browser does not support canvas labels, please upgrade your browser or change other browsers</Canvas></body></html><script> varpalette = Document.queryselector ("#palette"). GetContext ("2d");varRadial = Palette.createradialgradient ( -, -,0, $, $, -); Radial.addcolorstop (0,"#ff0000"); Radial.addcolorstop (0.2,"#FFDD00"); Radial.addcolorstop (0.8,"#1A16FF"); Radial.addcolorstop (0.99,"#3CFF63"); Radial.addcolorstop (1,"Rgba (0,0,0,0)"); Palette.fillstyle = radial; Palette.fillrect ( -, -, -, -);</script>Detail Canvas (iii)-draw graphics/fills and 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
