canvasでの描画に関する記事の続きで、画像の使用方法を学びます。 当然、プリミティブを使用してキャンバスに描画するのは非常に不便であり、特定の人件費が必要です。また、別の1年の結果は明らかに品質が劣っています。 したがって、当然のことながら、キャンバスAPIでは画像との相互作用を提供します。 画像の追加は、条件付きで2つのステップに分割できます。JavaScriptImageオブジェクトを作成し、2番目の最後のステップは、drawImage関数を使用してキャンバスに画像を描画することです。 両方のステップをさらに詳しく考えてみましょう。
新しいグラフィックオブジェクトの作成：
var img = new Image(); // img.src = 'image.png'; //
ところで、画像のソースとして、画像が記述されている次の行を指定できます。
img.src = 'data:image/gif;base64,R0lGODlhDAAMAOYAANPe5Pz//4KkutDb4szY3/b+/5u5z/3//3KWrfn//8rk8naasYGkuszY4Mbg8qG+0dzv9tXg5sTg8t/o7vP8/4iqv9ft9NPe5qfD1Mfc56O/0YKlu+Lr8M3Z4JCwxuj2/Of0+eDz9+rw9Z68z8/n8sHe8sbT3Ju6zuDv96nE1Onw9Nbh6cvX39Hq89Hq8u77/srW3tbh54Kku8ba56TD1u37/vL8/vL8/9ft9ebu8+Ps8bzM1Ymsw7XR4Nnj6Yanvsnj8qrI2Or2/NTf5tvl68vY3+r3/HqdtNji6OXt8eDz+dLc477c7bDO3t7n7d7v9s3Z4dbs9N/y98Pd6PX+/8/b4f7//+Hp7tDo8vv//+fu84GjunKWro6uxHqctOfu9P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAMAAwAAAeEgCJfg4RfWlo5KlpgjI2OOklWBwcBAVmXCQlXHAUFVBkGBjMUNzZOEy81IF2sXUZCH0QrDyhPGzICAkohUj4XHhoQKQsLGDgWUTFIJxUjUy0uWNIkQxE9W9gMDD9BCgpLAEBNXl5H5F40DlUDEkxc71wICDwlDQBQHQ0EBEUsJjswBgQCADs=';
1. drawImage
次に、キャンバスに画像を描画します。 これにはdrawImage関数があります。
drawImage(image, x, y) // x y ,
画像ソースがオブジェクトに割り当てられた直後に画像がロードされ、draw関数が呼び出されるまでに完全にロードされない場合、単にキャンバスに描画されないことに注意してください。 この状況を回避するには、次の設計を使用します。
var img = new Image(); // img.onload = function() { // /* - */ } img.src = 'myImage.png'; //
したがって、おそらく基本的な例を検討できるようになりました。
<!doctype html> <html> <meta charset='utf-8'> <head> <title>imgExample</title> </head> <body> <canvas id='example'> </canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'), // pic = new Image(); // "" pic.src = 'http://habrahabr.ru/i/nocopypast.png'; // , pic.onload = function() { // onLoad, ctx.drawImage(pic, 0, 0); // 0, 0 } </script> </body> </html>
この記事の例が含まれるフィードへのリンク。
2.プルプル
しかし、すべてが画像付きの単純な描画に限定されている場合、別の記事を書くことはできませんでしたが、前の投稿のサブアイテム「画像」に限定されます。 そこで、画像のスケーリングを試みます。これには、drawImage関数を呼び出す別の方法があります。
drawImage(image, x, y, width, height) // width, height
前の例を使用して、drawImageにいくつかの変更を加えます。
ctx.drawImage(pic, 0, 0, 300, 150);
この記事の例が含まれるフィードへのリンク。
3.画像の断片を描画します
8つのパラメーターを持つ3番目のdrawImage呼び出しは次のようになります。
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); // // sx, sy, sWidth, sHeight - // dx, dy, dWidth, dHeight
同じ例を使用して、drawImage関数を3回調整します。
ctx.drawImage(pic, 25, 42, 85, 55, 0, 0, 170, 110);
この記事の例が含まれるフィードへのリンク。
4.挑戦
今では、実際の例で行われたすべてを統合することが残っています。 その例のように、これは既存のゲームからだけでなく、私たちによって発明された小さな地図になります。 適切に機能するために、グラフィックエディターで、トラック、家、クリアリングを描画するために必要なフラグメントで構成される画像を作成する必要があります。 一般に、マップフラグメントはタイルと呼ばれ、それらがすべて1つのイメージにアセンブルされたファイルはタイルセットと呼ばれます。 これは、UbuntuのPintaプログラムで自分の手で描いた絵です。
したがって、寸法は8 x 8の正方形ブロックで、幅は32ピクセルです。 マップでは、家と道を描く必要があります。 家の要素はペンで描かれ、すべてのレンガを言うことができます。 草と砂は、空洞に適切な色を塗り、ノイズを追加することで作られました。 もちろん、すべてが非常に原始的に提示されていますが、示唆的なものです。
var map = [[{x：1、y：4} ...などのコードのようなピンセットのペアを検討してください。値xおよびyは、写真から取得する要素を示します。 つまり 元の図面を32×32の正方形に分割すると、より明確になります。
そしてforesample ：
<!doctype html> <html> <meta charset='utf-8'> <head> <title>imgExample</title> </head> <body> <canvas id='example'> </canvas> <script> var example = document.getElementById('example'), // ctx = example.getContext('2d'), // cellSize = 32, // pic = new Image(), // "" map = // [ [{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4}], // 1 [{x:1,y:4},{x:1,y:1},{x:2,y:1},{x:3,y:1},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4}], // 2 [{x:1,y:4},{x:1,y:2},{x:2,y:2},{x:3,y:2},{x:1,y:4},{x:1,y:3},{x:1,y:3},{x:1,y:3}], // 3 [{x:1,y:4},{x:3,y:4},{x:2,y:3},{x:3,y:4},{x:1,y:4},{x:1,y:3},{x:1,y:4},{x:1,y:4}], // 4 [{x:1,y:4},{x:3,y:4},{x:2,y:4},{x:3,y:4},{x:1,y:4},{x:1,y:3},{x:1,y:4},{x:1,y:4}], // 5 [{x:1,y:4},{x:1,y:4},{x:1,y:3},{x:1,y:4},{x:1,y:4},{x:1,y:3},{x:1,y:4},{x:1,y:4}], // 6 [{x:1,y:4},{x:1,y:4},{x:1,y:3},{x:1,y:3},{x:1,y:3},{x:1,y:3},{x:1,y:4},{x:1,y:4}], // 7 [{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4}] // 8 ]; // (x y ) // 88 example.width = 8 * cellSize; example.height = 8 * cellSize; pic.src = 'https://habrastorage.org/getpro/habr/post_images/e85/727/cb1/e85727cb1a88099325eaf5b243d4c41f.png'; pic.onload = function() { // onLoad, for (var j = 0 ; j < 8; j ++) for (var i = 0; i < 8; i ++) // '' ctx.drawImage(pic, (map[i][j].x-1)*cellSize, (map[i][j].y-1)*cellSize, 32, 32, j*cellSize, i*cellSize, 32, 32); } </script> </body> </html>
例を見る