Home > Article > Web Front-end > Detailed explanation of graphic code of Html5 Canvas Image (1)

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

黄舟Original: 2017-03-28 15:42:422990browse

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:a1f02c36ba31691bcfe87b2722de723ba376092e9406724d5c271fcc648ed25a,

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the sample code of html5 Canvas drawing (3)Next article：Detailed explanation of the sample code of html5 Canvas drawing (3)

See more

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

Related articles