Comment: I won’t try the technology that Microsoft doesn’t support very much. When Microsoft says it will support it, I will try it. Maybe I'm used to following Microsoft's route, but it's quite stupid to think about it.
mvc is a good thing. Why don’t you learn it when you 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 before you learn it; html5 is a good thing, why do you have to wait until IE9 comes out before you 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 coords values in the html code.
Technical analysis: Intuition tells me that html5 canvas is competent.
Since I have never been involved in canvas in substance and have only seen demos developed by others using canvas, I had to bing the tutorial on html5 canvas. Discover the following link:
After reading the document, write the code:
Code analysis:
1.1 html: Use a picture as the base and place it on it for drawing pictures
1.2 css: At least you need to place the right position, and the transparent place should be transparent.
1.3 Javascript: Mousedown, mousemove, mouseup
<div>
<img src="http://www.vevb.com/uploads/allimg/130720/10022R603_0.jpg" />
<canvas>
<p>some info to tell the people whose broswer doesn't support html5</p>
</canvas>
</div>
Experienced students may know that this is destined to be a tragedy when they look at the html5 code. When there is an img element under the canvas, the canvas will be opaque no matter what. I forgot whether I can draw something on the canvas, which should not work. It seems that this canvas element has a cleanliness and is unwilling to be with other low-level elements. Even if I want to settle for the second best, it won’t work as a background element of the 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 similar effects to layers in photoshop? That is to get a few more canvas elements, replace the above img with canvas, and then draw the img on this canvas, so that canvas is transparent to canvas. Alas... the code is as follows:
<div>
<canvas></canvas>
<canvas>
<p>some info to tell the people whose broswer doesn't support html5</p>
</canvas>
</div>
Well, the html is done, and the next step is to draw on canvas. With the help of javascript, this task is very simple.
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.vevb.com/uploads/allimg/130720/10022R603_0.jpg';
}, false);
// Please note that the code taken directly in the document is necessary for the opera and ie9 onload events, otherwise the image will be blank, of course, this will not be the case under Chrome.
To be continued...
Original address