JavaScript Basics--Using canvas drawing _javascript Tips

Recently in learning Canvas drawing methods, recently had time to do a collation, as follows:

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 drawn, and the content that appears in the end tag after the start is backing information, which is displayed if the browser does not support <canvas> elements. For example:

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

var Drawing=document.getelementbyid ("drawing"); 
Determine browser support <canvas> element 
if (drawing.getcontext) { 
//Get a reference to the drawing context object, "2d" is to get the 2D context object 
var context= Drawing.getcontext ("2d"); 
Gets the data URI of the image 
var 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

Fills: Fills a shape with the specified style; Stroke: just draw the line at the edge of the graphic. The values of the FillStyle and Strokestyle two properties 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 the drawing context object, "2d" is to get the 2D context object 

<span style= "FONT-SIZE:14PX;" >//This program because there is no image, fill and stroke will not show 
context.strokestyle= "#0000ff"; 
Context.fillstyle= "Red"; 

(2), drawing a rectangle

Rectangles are the only shapes that can be drawn directly in the 2D context. The methods associated with rectangles include: Fillrec (), Strokerect (), and Clearrect (). All three methods receive 4 parameters: X, y, 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 the use of the Todataurl () method to export the image program drawn on the canvas element as follows:

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

(3), drawing the path

To draw the path, you must first call the Beginpath () method, which indicates that you want to start drawing the 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 draw, the x-coordinate, the Y coordinate, and the optional maximum pixel width. The 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 the 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);//Start (10,10), image size becomes 20x20 pixel; 
} 

(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 can easily be created and modified by the 2D context. To create a new advance 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 endpoint, and the y-coordinate of the endpoint. 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 mark position and the CSS color value. The color mark position is the data between a 0 (the starting color) to 1 (the ending color).

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

To ensure that gradients are aligned with shapes, you can sometimes consider using functions to ensure that the coordinates are appropriate, for example:

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 radiation gradient), you can use the Createradialgradient () method, which receives 6 parameters, corresponding 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

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 the drawing context object, "2d" is to get the 2D context object 
var context= Drawing.getcontext ("2d"); 
  var image=document.images[0]; 
Pattern=context.createpattern (Image, "repeat"); 
  Context.fillstyle=pattern; 
Context.fillrect (10,10,150,150); 
} 

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.