search

Home >Web Front-end >H5 Tutorial >html5 first try knife under IE9 _html5 tutorial skills

html5 first try knife under IE9 _html5 tutorial skills

WBOY
WBOYOriginal
2016-05-16 15:51:151885browse

MVC is a good thing, why don't you learn it when you first enter the industry? You have to wait until asp.net MVC comes out before you learn it; ORM is a good thing, why do you have to wait until EF comes out to learn it? HTML5 is a good thing. Why do you have to wait until IE9 comes out to learn it? ...

——I think I should get rid of this bad habit.

No more nonsense.

Requirements: Imitate the function of drawing anchor points for pictures in Dreamweaver, and generate the coords value in the HTML code.

Technical analysis: Intuition tells me that html5 canvas can do the job.

Since I have never had any substantial contact with canvas and have only seen demos developed by others using canvas, I had no choice but to take a look at the html5 canvas tutorial. Found the following link: http://kb.operachina.com/node/190

Write the code after reading the document:

Code analysis:

1.1 html: Use a picture as the background, and put the canvas on top of it for drawing

1.2 css: You must at least place it in the right position and make the transparent places transparent

1.3 javascript: Mouse events need to respond to three: mousedown, mousemove, mouseup


Copy code
The code is as follows:




some info to tell the people whose broswer doesn't support html5


Experienced students may know that this is destined to be a tragedy as soon as they look at this html5 code. When the element is under the canvas, the canvas is opaque anyway. If you forget whether you can draw something on the canvas, it probably won't work. It seems that this canvas element has a "cleanliness" and is unwilling to join the ranks of other low-level elements. Even if I want to settle for the next best thing, it won't work if it appears as a background element of the container. My feeling is that this canvas may not be transparent to other elements. So the above code is actually wrong code...

So how can we achieve an effect similar to the layers in photoshop? That is to create a few more canvas elements, replace the above img with canvas, and then draw the img onto this canvas, so that the canvas is transparent to the canvas. Hey... the code is as follows:

Copy the code
The code is as follows:

< div id="container">


some info to tell the people whose broswer doesn't support html5


Now that the html is done, the next step is to draw on the canvas. With the help of javascript, this task is very simple.


Copy code
The code is as follows:

window.addEventListener('load ', function () {
// Get the canvas element.
var elem = document.getElementById('bg');
if (!elem || !elem.getContext) {
return ;
}
// Get the canvas 2d context.
var context = elem.getContext('2d');
if (!context || !context.drawImage) {
return ;
}
// Create a new image.
var img = new Image();
// Once it's loaded draw the image on the canvas.
img.addEventListener('load ', function () {
// Original resolution: x, y.
context.drawImage(this, 0, 0);
// Now resize the image: x, y, w, h.
context.drawImage(this, 160, 0, 120, 70);
// Crop and resize the image: sx, sy, sw, sh, dx, dy, dw, dh.
context. drawImage(this, 8, 20, 140, 50, 0, 150, 350, 70);
}, false);
img.src = 'http://www.sh1800.net/NavPic/20100917 .jpg';
}, false);
//The code taken directly from the document. Please note that it is necessary for opera and ie9 onload events, otherwise the picture will be blank. Of course, it will not be under Chrome. This way

To be continued....
Original address http://www.cnblogs.com/ice6/archive/2010/09/18/1830020.html
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：15 very useful HTML5 development tutorials and quick reference manuals_html5 tutorial skillsNext article：15 very useful HTML5 development tutorials and quick reference manuals_html5 tutorial skills

Related articles

See more