Canvas draws a rectangle, a circle, an irregular image (line), a gradient, and other image effects. canvas rectangle
Draw a rectangle:
The getContext ("2d") object is a built-in HTML5 object. It has multiple ways to draw paths, rectangles, circles, characters, and add images.
The fillStyle method colors it red, and the fillRect method specifies the shape, position, and size.
<!DOCTYPE html>
Draw a circle:
The arc method of the object is used to create a circular path. The method definition is XXX. arc (x, y, radius, startAngle, endAngle, anticlockwise)
X is the abscissa of the circular starting point, y is the ordinate of the circular starting point, radius is the circular radius, startAngle is the starting angle, endAngle is the ending angle, and anticlockwise is drawn clockwise.
XXX. beginPath (): create a path. XXX. closePath (): end the path. Then, render XXX. fill.
<script> var c = document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#ff0000"; cxt.beginPath(); cxt.arc(50,50,30,0,Math.PI*2,true); cxt.closePath(); cxt.fill();</script>
Draw line shape:
MoveTox, y) specifies where (x, y) and lineTo specifies where to end to draw a line:
Then, you can call stroke () to draw the image.
<script> var c = document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(20,20); cxt.lineTo(40,90); cxt.lineTo(80,70); cxt.lineTo(130,90); cxt.stroke();</script>
Draw the gradient effect:
Use the color you specified to draw the gradient background, which is similar to the normal rectangle, but the value of fillStyle is gradient.
Linear Gradient:
Method createLinearGradient (150,100,); specifies the linear gradient range.
Method grd. addColorStop (0, "# ff0000 ");
Grd. addColorStop (1, "#00ff00"); specify the gradient "start and end" for the gradient"If you want to implement a linear gradient between upper and lower, you should ensure the point (x0, y0) when calling createLinearGradient (x0, y0, x1, y1) to create the gradient ), the straight line connecting points (x1, y1) is a vertical line, that is, x0 = x1.
Of course, you can also achieve the diagonal gradient effect, as long as (x0, y0) (x1, y1) to form a diagonal line.
You can create an upper or lower gradient and a diagonal gradient as follows:
CreateLinearGradient (0,300,); // create a gradient
CreateLinearGradient (10, 10, 300,300); // create a diagonal gradient
<script> var c = document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd = cxt.createLinearGradient(0,0,150,100); grd.addColorStop(0,"#ff0000"); grd.addColorStop(1,"#00ff00"); cxt.fillStyle = grd; cxt.fillRect(0,0,150,70);</script>
Radial Gradient:
CreateRadialGradient (x0, y0, r0, x1, y1, r1)
Create a gradient drawing along the cone between two circles. The first three parameters represent a starting circle with a center (x0, y0) radius of r0, and the last three parameters represent the ending circle with a center (x1, y1) radius of r1.
For example, var grd = cxt. createRadialGradient (100,100, 30,100,100, 70)
A gradient effect is created for a circle with a circle (100,100) with a radius of 30 --- the circle with a center (100,100) radius of 70.
How can I obtain the value on the border of an irregular image on canvas?There is an irregular closed figure on the canvas, and you need to add a background to it. The shading is a horizontal line. That is to say, we need to first obtain the two points of this irregular graph and draw a line between the two points.
Ps How does one perform gradient processing on an irregular image?Use the polygon plug-in tool to select the irregular image as the selection area, and then use the gradient tool to fill in the gradient.
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
