HTML5 | Canvas Basic Operations

Last Update:2017-07-24 Source: Internet

Author: User

Tags save file

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<canvas>- define the use JavaScript the image is drawn.

P.S.

no use Set the size of the canvas, either in <canvas> use width and height Defined individually, either in js canvas The default canvas size is 300 x 150
GetContext is a DOM the method of the object, which is the native JS method, cannot be used JQuery Object Direct Access

————————————————————————————————————————————

Demo1-Draw Rectangle

Steps:

Get the canvas element
Get context
Fill and draw borders
Set drawing style
Specify Brush width
Set color values
Draw a rectangle

<<canvas.js>>

functionDraw (Elem) {//1. Get the canvas element    varCanvas =document.getElementById (Elem); Canvas.width= "600"; Canvas.height= "500"; //2. Get Context    varcontext = Canvas.getcontext (' 2d '); //3. Fill and draw the borderContext.fillstyle = ' #000 '; //4. Set drawing styleContext.strokestyle = ' #f60 '; //5. Specify the brush widthContext.linewidth = 3; //7. Draw a rectangleContext.fillrect (100,0,300,400); Context.strokerect (130,100,180,120);}

<<index.html>>

<!DOCTYPE HTML><HTML><Head>    <title>Canvas</title>    <Scripttype= "Text/javascript"src= "Canvas.js"></Script></Head><Bodyonload= "Draw (' canvas ')">    <!--drawing with the draw function -    <!--Defining the canvas -    <!--<canvas id= "Canvas" style= "border:1px black Solid;" width= "600px" height= "500px" ></canvas> -    <CanvasID= "Canvas"style= "border:1px black solid;"></Canvas></Body></HTML>

————————————————————————————————————————————

Demo2-Draw a circle

Steps:

Start creating a path
Create a graphics path
Create complete Close path
Invoke drawing method to draw by drawing style

<<canvas.js>>

functionDraw (Elem) {varCanvas = document.getElementById (' Canvas '); Canvas.width= 600; Canvas.height= 500; varcontext = Canvas.getcontext (' 2d '); Context.fillstyle= "#eeefff"; Context.fillrect (0, 0, 600, 500);  for(vari = 0; I < 10; i++) {Context.beginpath ();//Create start PathContext.arc (i *, I *, I *, 0, Math.PI * 2,true);//Create a graphics pathContext.closepath ();//create complete close pathContext.fillstyle = "Rgba (255,0,0,0.25)";//Path StyleContext.fill (); }}

————————————————————————————————————————————

Demo3-Draw Text

Set Text font
P.S. When you set a font, you can set several different fonts, in priority order, and if there is no current font, use the next
Set the vertical alignment of text
Set Text horizontal alignment

<<canvas.js>>

functionDraw (Elem) {varCanvas = document.getElementById (' Canvas '); Canvas.width= 800; Canvas.height= 300; Context= Canvas.getcontext (' 2d '); Context.fillstyle= "Green"; Context.fillrect (0, 0, 800, 300); //Set Text colorContext.fillstyle = "#fff"; Context.strokestyle= "#fff"; //Set FontContext.font = "Bold 40px ' Kaiti ', ' SimSun ', ' Microsoft Yahei '"; //Set AlignmentContext.textalign = ' Start '; Context.textbaseline= ' Bottom '; //Set ContentContext.filltext (' Draw text ', 200, 50);//Fill ModeContext.stroketext (' Draw text ', 100, 150);//Contour ModeContext.filltext (' 1111111111111111111111111111111111111111111 ', 200, 250, 500);//prevents overflow, which is compressed when the width is exceeded}

————————————————————————————————————————————

Demo4-Save File

Canvas API the save file is dynamically exported through the paint state to a Data URL The process of the data that the address points to

Todataurl () Method

<<canvas.js>>

1 functionDraw (Elem) {2     varCanvas =document.getElementById (elem);3Canvas.width = 800;4Canvas.height = 500;5     varcontext = Canvas.getcontext (' 2d ');6Context.fillstyle = "#eeefff";7Context.fillrect (0,0,800,500);8window.location = Canvas.todataurl (' image/jpeg '));9}

————————————————————————————————————————————

Demo5-Simple animations

HTML DOM setinterval () Method

<<canvas.js>>

functionDraw (Elem) {varCanvas =document.getElementById (Elem); Canvas.width= 800; Canvas.height= 500; varcontext = Canvas.getcontext (' 2d '); Context.fillstyle= "#eeefff"; Context.fillrect (0, 0, 800, 500); Context.fillstyle= ' #f90 '; //Canvas Erase partContext.clearrect (canvas.width-50, canvas.height-50); //execute the painting () function once every 100ms to draw a new small box    vari = 0; varPaintid = setinterval (painting, 100); functionpainting () {++i; Context.fillrect (+ i * 15, 80, 10, 10); if(i = = 20) {clearinterval (Paintid); }    }}

HTML5 | Canvas Basic Operations

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More