JavaScript: Drawing with Canvas

1. Basic usage

To use the <canvas> element, you must first set its width and Height properties, specify the size of the area that can be plotted, and the content that appears in the end tag after the start is the fallback information that is displayed if the browser does not support the <canvas> element. For example

<canvas id= "Drawing" width= "$" height= "$" >a drawing of Something</canvas>

Using the Todataurl () method, you can export an image drawn on the <canvas> element.

var Drawing=document.getelementbyid ("drawing");//determine browser support <canvas> element if (drawing.getcontext) {//Get a reference to drawing context object, " 2d "is to obtain the 2D context object var context=drawing.getcontext (" 2d ");//Obtain the image data Urivar imguri=drawing.todataurl (" Image/png "); Alert ( Imguri);//Display image var image=document.createelement ("img"); image.src=imguri;document.body.appendchild (image);}

2.2D context

(1), fill, and stroke

Fill: Fills the shape with the specified style; stroke: simply draw a line at the edge of the graphic. The values of the two properties of FillStyle and Strokestyle can be strings, gradient objects, or pattern objects.

var Drawing=document.getelementbyid ("drawing");//determine browser support <canvas> element if (drawing.getcontext) {//Get a reference to drawing context object, " 2d "is to get the 2D context object var context=drawing.getcontext (" 2d ");

Because there is no image in this program, the fill and stroke will not show context.strokestyle= "#0000ff"; context.fillstyle= "Red";}

(2), Draw rectangle

A rectangle is the only shape that can be drawn directly in a 2D context. The methods associated with rectangles include: Fillrec (), Strokerect (), and Clearrect (). All three methods can receive 4 parameters: x coordinate, y coordinate, width and height.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

The following is a procedure for exporting an image drawn on a canvas element using the Todataurl () method, as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


(3), Draw path
To draw a path, you must first call the Beginpath () method, which indicates that you want to start drawing a new path.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

(4), drawing text
There are two main methods of drawing text: Filltext () and Stroketext (). The two methods receive 4 parameters: The text string to be drawn, the x-coordinate, the y-coordinate, and the optional maximum pixel width. These two methods have three properties: Font, TextAlign, and Textbaseline.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

(5), transform
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

(6), drawing images
var Drawing=document.getelementbyid ("drawing");//determine browser support <canvas> element if (drawing.getcontext) {//Get a reference to drawing context object, " 2d "is to get the 2D context object var context=drawing.getcontext (" 2d "); var Image=document.getelementbyid (" image "); Context.drawimage ( IMAGE,10,10,20,20);//starting at (10,10), the image size will become 20x20 pixels;}
(7), Shadow
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

(8), gradient
Gradients are represented by canvasgradient instances and are easily created and modified through the 2D context. To create a new antecedent gradient, you can call the Createlineargradient () method. This method receives 4 parameters: The x-coordinate of the starting point, the y-coordinate of the starting point, the x-coordinate of the end, and the y-coordinate of the end point. After you create a gradient object, the next step is to use the Addcolorstop () method to specify the color label, which receives two parameters: the color label position and the CSS color value. The color label position is a 0 (starting color) to 1 (the end color) between the data.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


To ensure that gradients align with shapes, you can sometimes consider using functions to ensure that coordinates are appropriate, such as:
function Createrectlineargradient (context,x,y,width,height) {   return context.createlineargradient (x,y,x+width , y+height);}


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

To create a radial gradient (or a radiation gradient), you can use the Createradialgradient () method, which receives 6 parameters that correspond to the center and radius of the two circles,
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

(9), mode
The pattern is actually a duplicate image that can be used to fill or stroke a graphic
var Drawing=document.getelementbyid ("drawing");//determine browser support <canvas> element if (drawing.getcontext) {//Get a reference to drawing context object, " 2d "is to get the 2D context object var context=drawing.getcontext (" 2d ");    var image=document.images[0];p attern=context.createpattern (image, "repeat");    Context.fillstyle=pattern;context.fillrect (10,10,150,150);}


JavaScript: Drawing with Canvas