html5 IE9에서 먼저 Knife를 사용해 보세요. _html5 튜토리얼 기술

MVC는 좋은데, 처음 업계에 입문할 때 배우지 않는 이유는 무엇입니까? asp.net MVC가 나올 때까지 기다려야 ORM이 좋은데 왜 EF까지 기다려야 합니까? HTML5가 좋은데 왜 IE9가 나올 때까지 기다려야 합니까? ...

——이 나쁜 습관을 없애야 할 것 같아요.

더 이상 헛소리는 그만!

요구 사항: Dreamweaver에서 그림의 앵커 포인트를 그리는 기능을 모방하고 HTML 코드에서 좌표 값을 생성합니다.

기술적 분석: 직관에 따르면 html5 캔버스가 해당 작업을 수행할 수 있습니다.

저는 캔버스와 실질적인 접촉을 해본 적이 없고 다른 사람이 캔버스를 사용하여 개발한 데모만 봤기 때문에 어쩔 수 없이 html5 캔버스 튜토리얼을 살펴보았습니다. 다음 링크를 찾았습니다: http://kb.operachina.com/node/190

문서를 읽은 후 코드 작성:

코드 분석:

1.1 html: 그림을 배경으로 하고, 그 위에 캔버스를 올려서 그림을 그립니다.

1.2 css: 적어도 올바른 위치에 배치하고 투명한 부분을 투명하게 만들어야 합니다

1.3 javascript: 마우스 이벤트는 mousedown, mousemove, mouseup 세 가지에 응답해야 합니다.

코드 복사

코드는 다음과 같습니다.

<div id="container">
<img id="bg" width="390" height="560" src= "http://www.sh1800.net/NavPic /20100917.jpg" />
<canvas id="drewpanel" width="390" height="560"> 브라우저가 html5를 지원하지 않는 사람들에게 알려줄 정보</p>
</div>


경험이 있는 학생들은 이것이 운명이라는 것을 알 수 있습니다. 이 html5 코드를 보는 순간 비극이 될 것입니다. 요소가 캔버스 아래에 있을 때 캔버스에 무언가를 그릴 수 있는지 잊어버리면 아마도 작동하지 않을 것입니다. 이 캔버스 요소는 "청결함"을 갖고 있어 다른 하위 요소의 대열에 합류하기를 꺼리는 것 같습니다. 차선책을 선택하더라도 그것이 컨테이너의 배경 요소로 나타나면 작동하지 않습니다. 내 생각에는 이 캔버스가 다른 요소에 투명하지 않을 수 있다는 것입니다. 그럼 위 코드는 사실 잘못된 코드인데...

그럼 어떻게 하면 포토샵의 레이어와 비슷한 효과를 얻을 수 있을까요? 즉, 캔버스 요소를 몇 개 더 만들고 위의 img를 캔버스로 바꾼 다음 이 캔버스에 img를 그려서 캔버스가 캔버스에 투명해지도록 하는 것입니다. 아... 코드는 다음과 같습니다.

코드를 복사하세요. 코드는 다음과 같습니다.

< div id="container">

<canvas id="bg" width="390" height="560"></canvas>
<캔버스 ID ="drewpanel" width=" 390" height="560">
<p>브라우저가 html5를 지원하지 않는 사람들에게 알려주는 정보</p>
</canvas> ></div>


이제 HTML이 완성되었으므로 다음 단계는 자바스크립트를 사용하여 매우 간단합니다.

코드 복사

코드는 다음과 같습니다.

window.addEventListener ('load', function () {

// 캔버스 요소를 가져옵니다.

var elem = document.getElementById('bg');
if (!elem || !elem.getContext) {
return ;
}
// 캔버스 2D 컨텍스트를 가져옵니다.
var context = elem.getContext('2d')
if (!context || !context.drawImage) 🎜>return ;
}
// 새 이미지를 만듭니다.
var img = new Image()
// 로드되면 이미지를 캔버스에 그립니다. ('load', function () {
// 원래 해상도: x, y.
context.drawImage(this, 0, 0);
// 이제 이미지 크기 조정: x, y, w , h.
context.drawImage(this, 160, 0, 120, 70)
// 이미지 자르기 및 크기 조정: sx, sy, sw, sh, dx, dy, dw, dh. >context.drawImage(this, 8, 20, 140, 50, 0, 150, 350, 70)
},
img.src = 'http://www.sh1800.net/ NavPic/20100917 .jpg';
},
//문서에서 직접 가져온 코드입니다. Opera 및 ie9 onload 이벤트에 필요합니다. 그렇지 않으면 그림이 비어 있게 됩니다. , 이렇게 하면


계속됩니다....
원본 주소 http://www.cnblogs.com/ice6/archive/2010/09/18 /1830020.html