HTML5 with Kingdz study canvas images and text

Hello everyone, this class we continue to explain some of the common use of the label canvas, hehe, the label is really very useful.

This lesson first shows how to insert an image in a canvas.

Steps for canvas to insert an image: Oh, here we go again.

1. First of all, of course, a picture is prepared.

2. Use the drawImage method to insert the image into the canvas.

The DrawImage method has three morphological parameters to choose from.

The first type:

Let's first write an example in the simplest way.

DrawImage (image, X, y)

Where image is an image or a canvas object, and X and Y are their starting coordinates in the target canvas

Let's write an example to illustrate this. It's clear to all of you to look.

function Draw () {        var c = document.getElementById ("MyCanvas");        var cxt = C.getcontext ("2d");        var img = new Image ();        Img.onload = function () {            cxt.drawimage (img, 0, 0);        }        IMG.SRC = "2.png";    }

Well, look at the effect.

The second type:

DrawImage (image, X, y, width, height)

Parameters are needless to say too clear, the image of the high and wide, hehe.

function Draw () {    var c = document.getElementById ("MyCanvas");    var cxt = C.getcontext ("2d");    var img = new Image ();    Img.onload = function () {        //cxt.drawimage (img,0,0);        for (i = 0; i < 4; i++) {            for (j = 0; J < 4; J + +) {                cxt.drawimage (img, J *, I *, +);            }        }    }    IMG.SRC = "2.png";}

The third type:

DrawImage (Image, SX, SY, Swidth, sheight, dx, dy, dwidth, dheight)

The most complex DrawImage miscellaneous use method, including the above 5 parameters,

The other 4 parameters set the position and height width in the source image. These parameters allow you to crop the source image dynamically before the image is displayed .

This time, in order to see the effect, we used this picture, and we tried to figure it out as long as her head

Well, start cutting, in fact, some number of questions, "This beautiful woman above me is 200*200."

function Draw () {        var c = document.getElementById ("MyCanvas");        var cxt = C.getcontext ("2d");        var img = new Image ();        Img.onload = function () {cxt.drawimage (img, 0, +, +, +, +, +            );        }        IMG.SRC = "1.jpg";    }

Did you see it? There's only one head left.

Let's start with the second content of this lesson----------text

There are two ways to draw text:

Filltext and Stroketext.

The first draws a fillStyle filled text, which draws only strokeStyle the bounding text.

The parameters are the same: the position (x, y) coordinates of the text and text to be drawn. There is also an optional option--maximum width. If needed, the browser shrinks the text so that it fits the specified width.

Do you want to see this, draw the rectangle?

function Draw () {        var c = document.getElementById ("MyCanvas");        var cxt = C.getcontext ("2d");        Cxt.fillstyle = "#0f0";        Cxt.font = "bold 20px Arial";        Cxt.textbaseline = "Top";        Cxt.filltext ("Kingdz original", ();        Different way        Cxt.font = "Italic 20px Microsoft Ya Black";        Cxt.stroketext ("Kingdz original", "Max");    }

As follows.

OK, the image and text simple introduction to this, good text to the top AH!!!

HTML5 with Kingdz study canvas images and text