Detailed explanation of graphic code of Html5 Canvas Image (1)-H5 Tutorial-php.cn

Detailed explanation of graphic code of Html5 Canvas Image (1)

黄舟

Release： 2017-03-28 15:42:42

Original

2988 people have browsed it

The Image

API supported by Canvas is very powerful; we can directly load the image and display it on the Canvas, and we can also cut and splice the display as needed Any image part;

In addition, Canvas provides us with the function of storing its pixel data. We can manipulate the pixel data and then redraw it onto the Canvas.

Although Canvas only provides a few Image API functions, it opens up a world of pixel-level manipulation;

It enables developers to create optimized applications directly in the web browser without any plug-ins.

Canvas Api allows access to DOM-defined Image objects:,

It also supports using javascript to create Image object instances: var img1=new Image();

Create image After that, you can set its path: img1.src="my.png";

##When the Image is called in the code, we need to ensure that it can Being loaded and used; when the load event of the Image occurs, we can create a listening event to trigger the operation on the Image;

img1.addEventListener('load', eventLoaded, false);

When the Image is completely loaded, eventLoaded will be triggered to execute; in these events, we can execute the Image operation;

function eventLoaded() { drawScreen();//The main method entry for Image operation; }

Display Image (display image);

Method: drawImage(image,x,y):

image represents the image to be drawn;

(x,y) represents the position of the upper left corner of the image when the image is drawn on the Canvas;

Resize Image

Method: drawImage(image,x,y,width,height):

image represents the original image;

Resize the image according to the parameters [width, height] , forming NewImage;

(x,y) represents the position of the upper left corner of NewImage when NewImage is drawn on Canvas;

Get some parts of Image

drawImage(image, sx, sy, sw, sh, x, y, width, height)

image represents the original image;

Point (sx, xy) and [width sw, height sh] form a rectangle, which is an operation for image, take the original Part of the image forms a new partImage;

Adjust the size of the partImage according to the parameters [width, height] to form a NewImage;

(x,y) represents the position of the upper left corner of NewImage when NewImage is drawn on Canvas;

example instance:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Images</title>
<script type="text/javascript" src="../script/modernizr-latest.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}

function canvasSupport() {
return Modernizr.canvas;
}

function eventWindowLoaded() {
canvasApp();
}

function canvasApp() {

if(!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");

var imgmain = new Image();
imgmain.addEventListener(&#39;load&#39;, eventLoaded, false);
imgmain.src = "image.png";

function eventLoaded() {
drawScreen();
}

function drawScreen() {
context.fillStyle = "#EEEEEE";
context.fillRect(0, 0, theCanvas.width, theCanvas.height)
//display image107*86
context.drawImage(imgmain, 0, 0);
context.drawImage(imgmain, 120, 0);
//resize image
context.drawImage(imgmain, 0, 90, 107, 86);
context.drawImage(imgmain, 120, 90, 53, 43);
context.drawImage(imgmain, 190, 90, 26, 21);
//part of image
context.drawImage(imgmain, 0, 0, 107, 86, 0, 180, 107, 86);
context.drawImage(imgmain, 0, 0, 57, 86, 120, 180, 57, 86);
context.drawImage(imgmain, 50, 0, 57, 86, 190, 180, 57, 86);
context.drawImage(imgmain, 0, 0, 57, 43, 260, 180, 57, 43);
context.drawImage(imgmain, 50, 43, 57, 43, 330, 223, 57, 43);
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>

Copy after login

Pictures cited in the example:

Example renderings:

The above is the detailed content of Detailed explanation of graphic code of Html5 Canvas Image (1). For more information, please follow other related articles on the PHP Chinese website!