Home > Developer > Web Develop
Canvas is a canvas that can draw any line, graph, fill, and so on. All of this is done with JS, and the canvas provides not only a simple two-dimensional vector drawing, but also a series of API support including three-dimensional drawing and image processing.
Create a canvas label
<!-- Create a canvas element - < ID= "MyCanvas"></canvas>
The above label is just a canvas, and the id attribute is required, followed by the ID to get the current canvas DOM object. With this Canvase DOM object you can get his context, and the canvas drawing is based on the context object of the canvas object.
var mycanvas;window.onload = function () { MyCanvas = document.getElementById ("MyCanvas"); Gets the context of var context = Mycanvas.getcontext ("2d"); }The context default has two drawing modes: the first draw line (stroke) The second fill (fill)
Use canvas to draw a
Draw a rectangle using canvasCanvas draws the overall steps to create an HTML page, set the canvas label to write JS, get the Canvas DOM object get context settings through the canvas tag DOM object to draw the line style, color draw the rectangle, or fill the rectangle
<Body> <!--Create a canvas element - <CanvasID= "MyCanvas10"width= "$"Height= "$"></Canvas> <Script> varMyCanvas=document.getElementById ("MyCanvas10"); //Get Context varContext=Mycanvas.getcontext ("2d"); //Set Painting modeContext.strokestyle= "#FF0000"; Context.setlinewidth (1); //Draw a rectangleContext.strokerect (Ten,Ten, -, -); //Fill ModeContext.fillstyle= "Blue"; Context.fillrect (Ten, -, -, -); </Script> </Body>
Draw a picture using canvas
var MyCanvas = document.getElementById ("MyCanvas10"); Gets the context of var context = Mycanvas.getcontext ("2d"); var image = new Image (); IMAGE.SRC = ". /img/[email protected] "; When the picture is loaded image.onload = function () { context.drawimage (image,10,10); }The Beginpath method of the context object represents the start drawing path, the MoveTo (x, Y) method sets the starting point of the segment, the LineTo (x, Y) method sets the end point of the segment, and the stroke method is used to color the transparent segment. The MoveTo and LineTo methods can be used multiple times. Finally, you can use the Closepath method to automatically draw a line from the current point to the starting point to form a closed graph, eliminating the use of a LineTo method.
var MyCanvas = document.getElementById ("MyCanvas10");
var context = Mycanvas.getcontext ("2d");
Start the comet path
Context.beginpath ();
Set line width
Context.setlinewidth (5);
Context.strokestyle = "#CC0000"; Set the color of a line
Context.moveto (10,10);
Context.lineto (10,60);
Context.lineto (70,10);
Set the mode at the top of the two line
Context.linecap = "Round";
Set the mode of intersection of two lines
Context.linejoin = "Round";
If you draw only two lines to call the closed space
Context.closepath ();
Context.stroke ();
Draw text Using canvas
The Filltext (String,x,y) method of the contextual context object is used to draw the text, his three parameters are the text content, the starting point coordinates x start coordinates y to use the font to set fonts, sizes, styles (similar to CSS font properties). Similar to this is the Stroketext method, which is used to add hollow words. Also note that the Filltext method does not support text break, that is, all text appears in one line. So, if you want to generate multiple lines of text, you only have to call multiple Filltext methods.
var MyCanvas = document.getElementById ("MyCanvas10"); var context = Mycanvas.getcontext ("2d"); Context.font = "Bold 20px Arial"; Context.textalign = "Left"; Context.fillstyle = "#FF0000"; Context.filltext ("Number one fast", 10,30);Effect:
Draw circles and ellipses with canvasIn the previous article, I have introduced you to draw a rectangle, draw other shapes, such as a circle, are a way of thinking, but the method is different. And then I'll show you a little. Draw circles and ellipses. The Arc method for context contexts is to draw a circle or ellipse, the x and Y parameters of the Arc method are the center coordinates, RADIUS is the radius, and startangle and Endangle are the starting and ending angles of the sector (in radians). Anticlockwise indicates that the diagram should be drawn counterclockwise (true) or clockwise (false).
<CanvasID= "Democanvas"width= "$"Height= "All"></Canvas> <Scripttype= "Text/javascript"> //get the current canvas object by ID varCanvasdom=document.getElementById ("Democanvas"); //getting context objects from a canvas DOM object varContext=Canvasdom.getcontext ("2d"); Context.beginpath ();//Start Drawing Paths //draw with (60,60) as the center, 50 is the radius length, from 0 degrees to 360 degrees (pi is 180 degrees), the last parameter represents clockwise rotation. Context.arc ( -, -, -, 0, Math.PI* 2, true); Context.linewidth= 2.0;//the width of the lineContext.strokestyle= "#000";//the style of the lineContext.stroke ();//draw Hollow, of course, if you use fill that is filled. </Script>Set up gradients using canvas
The Createlineargradient method is used to set the gradient color.
Set the fade color var MyCanvas = document.getElementById ("MyCanvas10"); var context = Mycanvas.getcontext ("2d"); The parameters of the Createlineargradient method are (x1, y1, x2, y2), where X1 and Y1 are the starting coordinates, and X2 and Y2 are the end coordinates. //through different coordinate values, you can generate a gradient from top to bottom, left to right, etc. var mygradient = context.createlineargradient (0,0,0,160); Mygradient.addcolorstop (0, "#FF0000"); Mygradient.addcolorstop (0.5, "#BABABA"); Mygradient.addcolorstop (1, "#00FF00"); Context.fillstyle = mygradient; Context.fillrect (10,10,200,200);Draw Shadow Context.shadowoffsetx = 10;//Set horizontal offset context.shadowoffsety = 10;//Set vertical displacement Context.shadowblur = 5;// Set the degree of ambiguity context.shadowcolor = "#cc0000"; Context.fillstyle = "Red"; Context.fillrect (10,10,200,100);
The Save method is used to save the context, and the Restore method is used to revert to the context of the last saved environment.
Ctx.save (); Ctx.shadowoffsetx = 10;ctx.shadowoffsety = 10;ctx.shadowblur = 5;ctx.shadowcolor = Rgba (0,0,0,0.5); ctx.fillStyle = # Cc0000;ctx.fillrect (10,10,150,100); Ctx.restore (); Ctx.fillstyle = #000000; Ctx.fillrect (180,10,150,100);
With the Save method, the current setting is saved and a shaded rectangle is drawn. Then, using the Restore method, the pre-save settings are restored.
Reference Blog http://www.2cto.com/kf/201502/376960.html
HTML Learning Notes (Canvas Basics)
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
