Shulou(Shulou.com)06/03 Report--

This article is to share with you about the use of html5 under IE9, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Mvc is a good thing, why don't you learn it when you enter the profession, but wait until asp.net mvc comes out? 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? .

I think I should get rid of this bad habit.

No more nonsense.

Requirements: imitate the function of dreamweaver to draw anchor points for pictures and generate cores values in html code.

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

Since I have never actually come into contact with canvas, I have only seen demo developed by others with canvas, so I have to bing the tutorials of html5 canvas. The following link was found: http://kb.operachina.com/node/190

After reading the document, write the code:

Code analysis:

1.1 html: to use a picture as the bottom, canvas is placed on it for drawing

1.2 css: you should at least put it in the right place, where it should be transparent.

1.3 javascript: respond to mouse events in three ways: mousedown,mousemove,mouseup

The code is as follows:

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

Experienced students may know at a glance that this html5 code is destined to be a tragedy. When there is an img element under the canvas, the canvas is opaque anyway and forgets whether something can be painted on the canvas. It seems that this canvas element is addicted to cleanliness and does not want to be in cahoots with other low-level elements. Even if I have to settle for second best, I can't even appear as a background element of cantainer. My feeling is that this canvas may not be transparent to other elements. So the above code is actually the wrong code.

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

The code is as follows:

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

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

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,0150,350,70)

}, false)

Img.src = 'http://www.sh2800.net/NavPic/20100917.jpg';

}, false)

/ / if you take down the code directly in the document, please note that it is necessary for opera and ie9 onload events, otherwise the image will be blank, which is not the case under Chrome.

The above is how to use html5 under IE9. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.