Canvas draws a rectangle, a circle, an irregular image (line), a gradient, and other image effects. canvas rectangle

Source: Internet
Author: User
Tags canvas rectangle

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.