html5 はまず IE9 でナイフを試してください _html5 チュートリアルのスキル-H5 チュートリアル-php.cn

html5 はまず IE9 でナイフを試してください _html5 チュートリアルのスキル

WBOY

リリース： 2016-05-16 15:51:15

オリジナル

1855 人が閲覧しました

MVC は良いものですが、なぜ業界に参入するときに学ばないのでしょうか? ORM は良いものですが、なぜ EF まで待たなければなりませんか? HTML5 が登場するのは良いことです。なぜ IE9 が登場するまで待たなければならないのでしょうか? ...

——この悪い習慣は直したほうがいいと思います。

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

要件: Dreamweaver で画像のアンカーポイントを描画する機能を模倣し、HTML コードで座標値を生成します。

技術分析: 直感的には、html5 キャンバスがその仕事を行うことができると思います。

私は Canvas に実質的に触れたことはなく、Canvas を使用して他の人が開発したデモを見ただけだったので、HTML5 Canvas チュートリアルを見る以外に選択肢はありませんでした。次のリンクを見つけました: http://kb.operachina.com/node/190

ドキュメントを読んだ後にコードを作成します:

コード分析:

1.1 html: 画像を背景として使用し、その上にキャンバスを置いて描画します

1.2 css: 少なくとも正しい位置に配置し、透明な場所を透明にする必要があります

1.3 JavaScript: マウスイベントは、mousedown、mousemove、mouseup の 3 つに応答する必要があります

コードをコピー

コードは次のとおりです:

経験豊富な学生はこれが運命であることを知っているかもしれませんこの HTML5 コードを見るとすぐに悲劇が起こります。要素がキャンバスの下にあるとき、キャンバス上に何かを描画できるかどうかを忘れてしまうと、おそらく機能しません。この Canvas 要素には「清潔さ」があり、他の低レベル要素の仲間入りをしたくないようです。次善の策に落ち着きたくても、それがコンテナの背景要素として表示されたらうまくいきません。私の感覚では、このキャンバスは他の要素に対して透明ではないかもしれません。つまり、上記のコードは実際には間違ったコードです...

では、Photoshop のレイヤーと同様の効果を実現するにはどうすればよいでしょうか?つまり、さらにいくつかの Canvas 要素を作成し、上記の img を Canvas に置き換えて、その img をこの Canvas に描画して、Canvas が Canvas に対して透明になるようにします。こんにちは...コードは次のとおりです:

コードをコピーしますコードは次のとおりです:

< div id="コンテナ">

<キャンバス id="bg" width="390" height="560">
<キャンバス ID ="drewpanel" width=" 390" height="560">

ブラウザが HTML5 をサポートしていない人に伝えるべき情報
>

HTML が完成したので、次のステップは JavaScript を使用してキャンバスに描画することです。

コードをコピーします

コードは次のとおりです:

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 イベントに必要であることに注意してください。それ以外の場合は、当然、画像は空白になります。この方法では Chrome の下にはありません

続きます....
元のアドレス http://www.cnblogs.com/ice6/archive/2010/09/18 /1830020.html