IE9 HTML5予備試験ナイフ

コメント：Microsoftがあまりサポートしていないテクノロジーを試しません。マイクロソフトがそれをサポートすると言うとき、私はそれを試してみます。たぶん私はマイクロソフトのルートをたどるのに慣れていますが、それについて考えるのは非常に愚かです。

- 私はこの悪い習慣を取り除くべきだと思います。

これ以上ナンセンスはありません。

要件：DreamWeaverで写真のアンカーポイントを描画する機能を模倣し、HTMLコードでCoords値を生成します。

テクニカル分析：Intuitionは、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>

</canvas>

</div>

経験豊富な学生は、これがHTML5コードを見ると悲劇になる運命にあることを知っているかもしれません。キャンバスの下にIMG要素がある場合、キャンバスは何があっても不透明になります。キャンバスに何かを描くことができるかどうかを忘れましたが、それはうまくいきません。このキャンバス要素には清潔さがあり、他の低レベルの要素と一緒にいたくないようです。 2番目のベストに落ち着きたいとしても、カンテナーの背景要素としては機能しません。私の気持ちは、このキャンバスが他の要素に対して透明ではないかもしれないということです。したがって、上記のコードは実際には間違ったコードです...

それでは、Photoshopのレイヤーと同様の効果をどのように達成できますか？つまり、さらにいくつかのキャンバス要素を取得し、上記のIMGをキャンバスに置き換えてから、このキャンバスにIMGを描画して、キャンバスがキャンバスに対して透明になるようにします。悲しいかな...コードは次のとおりです。

<div>

<canvas> </canvas>

<canvas>

<p> BroswerがHTML5をサポートしていない人々に伝えるためのいくつかの情報</p>

</canvas>

</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（これ、8、20、140、50、0、150、350、70）;

}、 間違い）;

img.src = 'http://www.vevb.com/uploads/allimg/130720/10022r603_0.jpg';

}、 間違い）;

//ドキュメントで直接撮影したコードは、オペラとIE9のオンロードイベントに必要であることに注意してください。そうしないと、画像は空白になります。もちろん、これはChromeの場合はそうではありません。

つづく...

元のアドレス