IE9 HTML5 예비 테스트 나이프

의견 : Microsoft가 그다지 지원하지 않는 기술을 시도하지 않을 것입니다. Microsoft가 그것을 지원할 것이라고 말하면 시도해 볼 것입니다. 어쩌면 나는 Microsoft의 경로를 따르는 데 익숙했지만 그것에 대해 생각하는 것은 매우 어리석은 일입니다.

-나는이 나쁜 습관을 없애야한다고 생각합니다.

더 이상 말도 안됩니다.

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

기술 분석 : 직관은 HTML5 캔버스가 유능하다는 것을 알려줍니다.

나는 물질의 캔버스에 관여 한 적이없고 캔버스를 사용하여 다른 사람들이 개발 한 데모 만 보았 기 때문에 HTML5 캔버스에 대한 자습서를 징계해야했습니다. 다음 링크를 찾으십시오.

문서를 읽은 후 코드를 작성하십시오.

코드 분석 :

1.1 HTML : 그림을베이스로 사용하고 그림을 그리기 위해 그것을 놓습니다.

1.2 CSS : 적어도 올바른 위치를 배치해야하며 투명한 장소는 투명해야합니다.

1.3 JavaScript : Mousedown, Mousemove, Mouseup

<div>

<img src = "http://www.vevb.com/uploads/allimg/130720/10022r603_0.jpg"/>

<canvas>

<p> Broswer가 html5를 지원하지 않는 사람들에게 알리는 일부 정보 </p>

</캔버스>

</div>

숙련 된 학생들은 이것이 HTML5 코드를 볼 때 비극이 될 것임을 알고있을 것입니다. 캔버스 아래에 IMG 요소가 있으면 캔버스는 무엇이든 상관없이 불투명합니다. 캔버스에 무언가를 그릴 수 있는지 잊어 버렸습니다. 이 캔버스 요소는 청결성을 가지고 있으며 다른 저수준 요소와 함께하지 않을 것 같습니다. 두 번째로 가장 잘 정착하고 싶더라도 Cantainer의 배경 요소로 작동하지 않습니다. 내 느낌은이 캔버스가 다른 요소에 투명하지 않을 수 있다는 것입니다. 따라서 위의 코드는 실제로 잘못된 코드입니다 ...

그렇다면 Photoshop의 레이어와 비슷한 영향을 어떻게 달성 할 수 있습니까? 즉, 몇 가지 캔버스 요소를 더 많이 얻고 위의 IMG를 캔버스로 교체 한 다음이 캔버스에 IMG를 그려서 캔버스가 캔버스에 투명합니다. 아아 ... 코드는 다음과 같습니다.

<div>

<canvas> </canvas>

<canvas>

<p> Broswer가 html5를 지원하지 않는 사람들에게 알리는 일부 정보 </p>

</캔버스>

</div>

글쎄, HTML이 완료되고 다음 단계는 캔버스를 그리는 것입니다. JavaScript의 도움 으로이 작업은 매우 간단합니다.

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

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

var elem = document.getElementById ( 'bg');

if (! elem ||! elem.getContext) {

반품;

}

// Canvas 2D 컨텍스트를 얻습니다.

var context = elem.getContext ( '2d');

if (! context ||! context.DrawImage) {

반품;

}

// 새 이미지를 만듭니다.

var img = new Image ();

//로드되면 캔버스에 이미지를 그립니다.

img.addeventListener ( '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.vevb.com/uploads/allimg/130720/10022r603_0.jpg';

}, 거짓);

// 문서에서 직접 찍은 코드는 오페라 및 IE9 onload 이벤트에 필요합니다. 그렇지 않으면 이미지가 비어있을 것입니다. 물론 Chrome 하에서는 그렇지 않습니다.

계속하려면 ...

원래 주소