Canvas入門（3）:影像處理和繪製文字，canvas影像處理

Canvas入門（3）:影像處理和繪製文字，canvas影像處理

來源：http://www.ido321.com/997.html

一、影像處理(非特別說明，所有結果均來自最新版Google)

在HTML 5中，不僅可以使用Canvas API繪製圖形，也可以用於處理網路或磁碟中的影像檔，然後繪製在畫布中。繪製映像時，需要使用drawImage()方法：

drawImage(image,x,y):image是映像引用，x,y是繪製映像時在畫布中的起始位置

drawImage(image,x,y,w,h):前三個同上，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;

   6:     }

   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’;

// onload事件實現邊繪製邊載入

  13:     image.onload = function()

  14:     {

  15:         drawImage(context,image);

  16:     };

  17:     function drawImage(context,image)

  18:     {

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

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

  21:         };

  22:     }

效果：

1、映像平鋪

   1: // 擷取canvas 的ID

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

   3:     if (canvas == null)

   4:     {

   5:         return false;

   6:     }

   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';

  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:         {

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

  33:             {

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

  35:             }

  36:         }

  37:     }

效果：

在HTML 5中，利用context.createPattern(image,type)也可以實現平鋪，type取值同background-image的平鋪值一樣。

   1: image.onload = function()

   2:     {

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

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

   5:         context.fillStyle = ptrn;

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

   7:     };

能同樣實現平鋪（圖片沒有縮放，所以是原圖大小平鋪）

2、映像裁剪

   1: // 擷取canvas 的ID

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

   3:     if (canvas == null)

   4:     {

   5:         return false;

   6:     }

   7:     // 擷取上下文

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

   9:     // 擷取漸層對象

  10:     var g1 = context.createLinearGradient(0,400,300,0);

  11:     // 添加漸層顏色

  12:     g1.addColorStop(0,'rgb(255,255,0)');

  13:     g1.addColorStop(1,'rgb(0,255,255)');

  14:     context.fillStyle = g1;

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

  16:     var image = new Image();

  17:     // onload事件實現邊繪製邊載入

  18:     image.onload = function()

  19:     {

  20:         drawImage(context,image);

  21:     };

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

  23:     function drawImage(context,image)

  24:     {

  25:         create5StarClip(context);

  26:         context.drawImage(image,-50,-150,300,300);

  27:     }

  28:     function create5StarClip(context)

  29:     {

  30:         var dx = 100;

  31:         var dy = 0;

  32:         var s  = 150;

  33:          // 建立路徑

  34:          context.beginPath();

  35:          context.translate(100,150);

  36:          var x = Math.sin(0);

  37:          var y = Math.cos(0);

  38:          var dig = Math.PI/5 *4;

  39:          // context.moveTo(dx,dy);

  40:          for (var i = 0; i < 5; i++) {

  41:              var x = Math.sin(i * dig);

  42:              var y = Math.cos(i * dig);

  43:              context.lineTo(dx+x*s,dy+y*s);

  44:          }

  45:          context.clip();

  46:     }

效果：

3、像素處理

   1: // 擷取canvas 的ID

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

   3:     if (canvas == null)

   4:     {

   5:         return false;

   6:     }

   7:     // 擷取上下文

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

   9:     var image = new Image();

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

  11:     // onload事件實現邊繪製邊載入

  12:     image.onload = function()

  13:     {

  14:         context.drawImage(image,0,0);

  15:         // 擷取原映像素

  16:         var imageData = context.getImageData(0,0,image.width,image.height);

  17:         for (var i = 0,n= imageData.data.length; i <n; i += 4) {

  18:             // red

  19:             imageData.data[i+0] = 255-imageData.data[i+0];

  20:             // green

  21:             imageData.data[i+1] = 255-imageData.data[i+2];

  22:             // blue

  23:             imageData.data[i+2] = 255-imageData.data[i+1];

  24:         };

  25:         // 將調整後的像素應用到映像

  26:         context.putImageData(imageData,0,0);

  27:     };

getImageData(sx,sy,sw,sh):表示擷取像素地區的起始座標和 高寬，返回一個具有width,height,data等屬性CanvasPixelArray對象，其中data屬性存放像素資料的數組，形如 [r1,g1,b1,a1,r2,g2,b2,a2……],r1,g1,b1,a1分別是第一個像素的紅綠藍值及透明度，以此類推。

putImageData(imagedata,dx,dy[,dirtyx,dirtyy,dirtyWidth,dirtyHeight]): 將像素資料重新繪製到映像上。imagedata是像素數組，dx,dy表示重繪的起始位置，後面四個參數是給出一個矩形的左上方座標和高寬。

Canvas API的像素操作只有部分瀏覽器支援，效果來自新版的Firefox瀏覽器

二、繪製文字

   1: // 擷取canvas 的ID

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

   3:     if (canvas == null)

   4:     {

   5:         return false;

   6:     }

   7:     // 擷取上下文

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

   9:     context.fillStyle = '#00f';

  10:     // 設定文字屬性

  11:     context.font = 'italic 30px sans-serif';

  12:     context.textBaseline = 'top';

  13:     // 填充字串

  14:     context.fillText('Canvas繪製文字',0,0);

  15:     context.font = 'bold 30px sans-serif';

  16:     // 輪廓字串

  17:     context.strokeText('改變位置了',50,50);

fillText(string,x,y[,maxwidth])：前三個不解釋，maxwidth表示顯示文字的最大寬度，可防止文字溢出

strokeText(string,x,y[,maxwidth]：同上。

文字屬性設定

font:設定字型

textAlign:水平對齊，取值可是start/end/left/right/center.預設是start

textBaseline:垂直對齊，取值可是top/hanging/middle/alphabetic/ideographic/bottom.預設是alphabetic

最終效果

下一篇：9個JQuery和5個JavaScript經典面試題

您好，教您一個html5 canvas的問題： 我在canvas中畫了多個圖形，有映像（image）、直線

canvas可以實現
首先canvas要響應滑鼠事件（onmousedown之類）
之後所有的圖形必須要建立相應的對象，來記錄他們所在的位置以及大小還有zOrder（層疊位置，在2個對象重疊的時候決定誰在上面），相應的對象放到一個數組裡並按zOrder排序
當canvas的滑鼠click事件觸發後，按照zOrder的順序來檢測滑鼠座標在不在某個對象的地區裡，如果在，則執行相應的函數
 
關注html5通過canvas文本在完成的圖形上可以加上文字？有示範視頻？

在每個 canvas對象中都擁有一個 path 對象，定義完路徑的輪廓，此時 canvas 畫面中沒有顯示任何路徑，開發人員需要繼續調用 stroke()/fill() 函數來完成將路徑渲染到畫面的最後一步。路徑的輪廓顏色和填充顏色由 strokeStyle 和 fillStyle 屬性決定。還可以通過canvas文本在完成的圖形上加上文字。推薦你一個視頻吧啊，比我講的清楚，搜一下“HTML5 向量繪圖新功能- Canvas 基本用法”