Front-end-html5 Canvas Learning

The canvas element is the most popular feature added by HTML5. It is done by setting an area in the page and then editing the graphic with a script.

You can introduce a canvas image as follows

<canvas id= "MyCanvas" ></canvas><script type= "Text/javascript" >  var canvas = document.getElementById (' MyCanvas ');   var cxt = Canvas.getcontext (' 2d '); var New  = "Flower.png";   function () {cxt.drawimage (img,0,0)}

Displaying a picture in a canvas is simple, you can add a stamp to a picture, stretch a picture, or modify an image through a modifier layer, and the picture is usually the focus on the canvas. With a few simple commands built into the HTML5 canvas API, you can easily add picture content to your canvas.

However, after the introduction of the picture, you must wait for the picture to be fully loaded before it can be manipulated, and the browser will usually load the picture asynchronously while the page script executes. If you try to render the picture on a canvas before it is fully loaded, the canvas will not show any pictures. So be aware that before you render the picture, make sure the picture is loaded.

To ensure that the picture has been loaded before rendering, use a callback function below to execute subsequent code only after the image has been loaded.

functionload () {varIMA =NewImage (); IMA.SRC= "Test.jpg"; if(ima.complete) {Drawima (IMA); }  Else{ima.onload=function() {Drawima (IMA);    }; Ima.onerror=function() {Window.alert (' Picture loading failed ');  }; };}if(document.all) {window.attachevent (' OnLoad ', load);}Else{Window.addeventlistener (' Load ', load,false);}

Differences between canvas and SVG and VML: Canvas uses a JavaScript-based script to draw, while SVG and VML use XML to draw.

Most canvas drawings are not defined on the canvas itself, but rather like the above var cxt = Canvas.getcontext (' 2d '); defined in the drawing environment obtained through the GetContext () method, here is the creation of a 2d drawing environment.

The Canvas API also uses the notation of the path, starting with Beginpath () and closing an open sub-path with Closepath (). The path must be defined, and other methods, such as fill (), are operations on this path.

If the path to the canvas is open, Closepath () closes it by adding a line to the current point and sub-path start point. If the sub-path is closed, this method does nothing. Once the sub-path is closed, no more lines or curves can be added to it. To continue adding to the path, you need to start a new subpath through MoveTo ().

Finally, throw out a few canvas demos.

Https://github.com/SunshineLXH/examples/tree/master/canvas

Front-end-html5 Canvas Learning