Canvas 入門 (3): 画像処理と描画 Text_html/css_WEB-ITnose

出典: http://www.ido321.com/997.html

1. 画像処理 (特に指定がない限り、すべての結果は最新バージョンの Google からのものです)

HTML 5 では、次のことができるだけでなく、グラフィックスを描画するための Canvas API を使用して、ネットワークまたはディスク上の画像ファイルを処理し、それらをキャンバス上に描画することもできます。画像を描画するときは、drawImage() メソッドを使用する必要があります:

drawImage(image,x,y): image は画像参照、x,y は画像を描画するときのキャンバス内の開始位置です

drawImage( image,x,y ,w,h): 最初の 3 つは上記と同じです。w、h は描画時の画像の幅と高さであり、画像の拡大縮小に使用できます

drawImage(image,sx, sy,sw,sh,dx,dy,dw.dh) : キャンバス上に描画されたイメージの全部または一部を、キャンバス上の別の場所にコピーします。 sx、sy、sw、sh はそれぞれ、元のイメージ内のコピー領域の開始位置、幅、高さであり、dx、dy、dw、dh は、キャンバス内のコピーされたイメージの開始位置、高さ、幅を表します。 ...

   1: // 获取canvas 的ID

   2: var canvas = document.getElementById('canvas');

   3: if (canvas == null)

   4: {

   5: return false;

効果:

1. 画像タイル

   6: }

   7: // 获取上下文

   8: var context = canvas.getContext('2d');

   9: context.fillStyle = '#eeeeff';

  10: context.fillRect(0,0,400,300);

  11: var image = new Image();

  13: image.onload = function()

  14: {

  15: drawImage(context,image);

  16: };

RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE

  17: function drawImage(context,image)

rreee rreee rreee rreee rreee rreee rreee rreee rreee rreee rreee rreee rreee rreee

  18: {

背景画像の値。

  19: for (var i = 0; i < 7; i++) {

  20: context.drawImage(image,0+i*50,0+i*25,100,100);

  21: };

  22: }

   1: // 获取canvas 的ID

   2: var canvas = document.getElementById('canvas');

   3: if (canvas == null)

タイリングも実現できます (画像は拡大縮小されていないため、元の画像サイズです)

2. 画像のトリミング

   4: {

   5: return false;

   6: }

rrreええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええRREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE ee rree

   7: // 获取上下文

   8: var context = canvas.getContext('2d');

   9: context.fillStyle = '#eeeeff';

  10: context.fillRect(0,0,400,300);

  11: var image = new Image();

  12: image.src = 'my.jpg';

効果:

3.ピクセル処理

  13: // onload事件实现边绘制边加载

  14: image.onload = function()

  15: {

  16: drawImage(canvas,context,image);

  17: };

  18: function drawImage(canvas,context,image)

  19: {

  20: // 平铺比例

  21: var scale = 5;

  22: // 缩小图像后宽度

  23: var n1 = image.width / scale;

  24: // 缩小图像后高度

  25: var n2 = image.height / scale;

  26: // 横向平铺个数

  27: var n3 = canvas.width / n1;

  28: // 纵向平铺个数

  29: var n4 = canvas.height / n2;

  30: for(var i = 0; i < n3; i++)

  31: {

getImageData(sx,sy,sw,sh): ピクセルの取得の開始を示しますarea 座標、高さ、幅。幅、高さ、データなどの属性を持つ CanvasPixelArray オブジェクトを返します。データ属性には [r1, g1, b1, a1, r2, g2、b2、a2...]、r1、g1、b1、a1 は、それぞれ最初のピクセルの赤、緑、青の値と透明度などです。

putImageData(imagedata,dx,dy[,dirtyx,dirtyy,dirtyWidth,dirtyHeight]): ピクセル データを画像上に再描画します。 imagedata はピクセル配列、dx、dy は再描画の開始位置を表し、次の 4 つのパラメータは長方形の左上隅の座標と高さと幅を示します。

Canvas API のピクセル操作は一部のブラウザでのみサポートされています

2. テキストを描画します

  32: for(var j=0; j < n4; j++)

  33: {

  34: context.drawImage(image,i*n1,j*n2,n1,n2);

  35: }

  36: }

  37: }

   1: image.onload = function()

   2: {

   3: // drawImage(canvas,context,image);

れーれーれーee

   4: var ptrn = context.createPattern(image,'repeat');

   5: context.fillStyle = ptrn;

   6: context.fillRect(0,0,400,300);

fillText(string,x,y[,maxwidth]): 最初の 3 つは説明されていません。これにより、テキストのオーバーフローを防ぐことができます。 y[,maxwidth]: 上記と同じです

テキスト属性設定

font: フォントを設定します

textAlign: 水平方向の配置、値は start/end/left/right/center です。デフォルトは start

textBaseline:垂直方向の配置。値は、top/hanging/middle /alphabetic/ideographic/bottom です。デフォルトは、alphabetic です

最終効果

次の記事: 9 つの JQuery と 5 つの JavaScript の古典的な面接の質問