canvas

Detailed explanation of HTML Canvas drawing usage
2012-5-16 15:16| Publisher: html5cn| Views: 18535| Comments: 9Summary
: canvas is a new HTML element, which can be drawn by Script language (usually JavaScript) graphics. It can be used, for example, for drawing, compositing images, or doing simple (and not so simple) animations. The image to the right shows some examples of canvas applications, which we will be covering in this tutorial...
<canvas> is a new HTML element that can be used by the Script language (usually JavaScript) to draw graphics. It can be used, for example, for drawing, compositing images, or doing simple (and not so simple) animations. The images on the right show some examples of <canvas> applications, and we'll see their implementation in this tutorial.

<canvas> was first introduced on Apple's Mac OS X Dashboard and later used in Safari. Browsers based on Gecko 1.8, such as Firefox 1.5, also support this new element. The element <canvas> is part of WhatWG Web applications 1.0, also known as HTML 5 standard specification.

The content of this tutorial covers only a small but very important application function of canvas markup - image display and processing.

Setting the Image Source

The most common way to draw on a canvas is to use an Image object. The supported source image formats depend on the browser's support, however, some typical image formats (png, jpg, gif, etc.) are basically fine.

Images can be grabbed from elements already loaded in the DOM or created on the fly on demand.

// Grab an image that is already on the page.

var myImage = document.getElementById('myimageid');// or create a new image.
myImage = new Image();
myImage.src = 'image.png'; In most
current versions of browsers that support the canvas tag, if you try to draw an image when it has not loaded, what is the result?


Nothing will happen. That is, if you want to draw an image, you need to wait for it to fully load. You can use the onload function of the image object to judge.
// Create an image.
myImage = new Image();
myImage.onload = function() {
// Draw image.
}
myImage.src = 'image.png'
;

Will use this 256×256 size gorilla.
image.png
Drawing an image
In the most basic drawing operations, all you need is the position (x and y coordinates) where you want the image to appear. The position of the image is judged relative to its upper left corner. Using this method, the image can simply be drawn on the canvas at its full size.
drawImage(image, x, y)
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');ctx.drawImage(myImage, 50, 50); ctx.drawImage
(myImage, 125, 125); ctx.drawImage
(myImage, 210, 210); For the dimensions of the image, you need to use the overloaded drawImage function, giving it the desired width and height parameters. drawImage(image, x, y, width, height) var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');ctx.drawImage(myImage,                  50, 50, 100, 100) ; ctx.drawImage(myImage, 125, 125, 200, 50); ctx.drawImage (myImage, 210, 210, 500, 500); Aspect ratio image and a method that is larger than the original image. scale.png image cropping The function of the last drawImage method is to crop the image.
















drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight) has

a lot of parameters, but basically you can think of it as taking a rectangular area from the original image and drawing it to the target area on the canvas inside.
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');ctx.drawImage(myImage,
                0, 0, 50, 50, 25, 25, 100, 100);
ctx.drawImage (myImage, 125, 125, 100, 100, 125, 125, 150, 150);
ctx.drawImage(myImage, 80, 80, 100, 100, 250, 250, 220, 220); these
are HTML5

Basic operations for drawing and processing images in the canvas tag.