Html5 knife in IE9

Comments: I will not try the technology that Microsoft does not support. I will try it when Microsoft says it wants to support it. Maybe it's just a habit to follow Microsoft's path, but it's silly to think about it. Mvc is a good thing. Why don't you learn it when you get started? You have to wait until asp.net mvc comes out. orm is a good thing, why do I have to wait until EF comes out to learn it? html5 is a good thing. Why do I have to wait until IE9 comes out to learn it ?......

-- I think I should get rid of this bad problem.

No more nonsense.

Requirement: The coords value in html code is generated by imitating the function of adding an anchor to an image in dreamweaver.

Technical analysis: intuition tells me that html5 canvas is competent.

Since I have never had any substantive experience with canvas, I only read the demo developed by others using canvas, so I had to bing the html5 canvas tutorial. The following link was found: http://kb.operachina.com/node/190

Write code after reading the document:

Code Analysis:

1.1 html: use an image as the base, and place the canvas on it for drawing.

1.2 css

1.3 javascript: cursor: mousedown, mousemove, and mouseup


The Code is as follows:
<Div id = "container">

<Canvas id = "drewpanel" width = "390" height = "560">
<P> some info to tell the people whose broswer doesn't support html5 </p>
</Canvas>
</Div>

Experienced users may know that this html5 code is doomed to be a tragedy. When there is an img element under the canvas, the canvas is not transparent in any case, if you forget the canvas, you may not be able to draw things. It seems that this canvas element is "clean" and does not want to be in the same flow with other low-level elements. Even if I want to leave, the background elements of cantainer cannot appear. I think 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, get a few more canvas elements, replace the above img with a canvas, and then draw the img onto the canvas, so that the canvas is transparent to the canvas. The Code is as follows:

The Code is as follows:
<Div id = "container">
<Canvas id = "bg" width = "390" height = "560"> </canvas>
<Canvas id = "drewpanel" width = "390" height = "560">
<P> some info to tell the people whose broswer doesn't support html5 </p>
</Canvas>
</Div>

The html is done, and the next step is to draw on the canvas. With 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, 0,150,350, 70 );
}, False );
Img. src = 'HTTP: // www.bkjia.com/uploads/allianz 131015/00061j520-0.jpg ';
}, False );
// The Code obtained directly in the Document. Note that it is required for the opera and ie9 onload events. Otherwise, the image will be blank. Of course, this will not happen in Chrome.

To be continued ....
Original address http://www.cnblogs.com/ice6/archive/2010/09/18/1830020.html