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

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

在HTML 5中，不僅可以使用Canvas API繪制圖形，也可以用于處理網(wǎng)絡(luò)或磁盤中的圖像文件，然后繪制在畫布中。繪制圖像時(shí)，需要使用drawImage()方法：

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

drawImage(image,x,y,w,h):前三個(gè)同上，w，h是繪制時(shí)圖像的寬度和高度，可以用于縮放圖像

drawImage(image,sx,sy,sw,sh,dx,dy,dw.dh): 將畫布中已經(jīng)繪制好的圖像的全部或者局部復(fù)制到畫布的另一個(gè)位置。sx,sy,sw,sh分別是原圖中被復(fù)制區(qū)域的起始位置寬高，dx,dy,dw,dh 表示復(fù)制后圖像在畫布中的起始位置和高寬。

   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事件實(shí)現(xiàn)邊繪制邊加載

  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事件實(shí)現(xiàn)邊繪制邊加載

  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: // 橫向平鋪個(gè)數(shù)

  27: var n3 = canvas.width / n1;

  28: // 縱向平鋪個(gè)數(shù)

  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)也可以實(shí)現(xiàn)平鋪，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: };

能同樣實(shí)現(xiàn)平鋪（圖片沒有縮放，所以是原圖大小平鋪）

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: // 獲取漸變對(duì)象

  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事件實(shí)現(xiàn)邊繪制邊加載

  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: // 創(chuàng)建路徑

  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事件實(shí)現(xiàn)邊繪制邊加載

  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: // 將調(diào)整后的像素應(yīng)用到圖像

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

  27: };

getImageData(sx,sy,sw,sh):表示獲取像素區(qū)域的起始坐標(biāo)和 高寬，返回一個(gè)具有width,height,data等屬性CanvasPixelArray對(duì)象，其中data屬性存放像素?cái)?shù)據(jù)的數(shù)組，形如 [r1,g1,b1,a1,r2,g2,b2,a2……],r1,g1,b1,a1分別是第一個(gè)像素的紅綠藍(lán)值及透明度，以此類推。

putImageData(imagedata,dx,dy[,dirtyx,dirtyy,dirtyWidth,dirtyHeight]): 將像素?cái)?shù)據(jù)重新繪制到圖像上。imagedata是像素?cái)?shù)組，dx,dy表示重繪的起始位置，后面四個(gè)參數(shù)是給出一個(gè)矩形的左上角坐標(biāo)和高寬。

Canvas API的像素操作只有部分瀏覽器支持，截圖效果來自新版的火狐瀏覽器

二、繪制文字

   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: // 設(shè)置文字屬性

  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])：前三個(gè)不解釋，maxwidth表示顯示文字的最大寬度，可防止文字溢出

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

文字屬性設(shè)置

font:設(shè)置字體

textAlign:水平對(duì)齊方式，取值可是start/end/left/right/center.默認(rèn)是start

textBaseline:垂直對(duì)齊方式，取值可是top/hanging/middle/alphabetic/ideographic/bottom.默認(rèn)是alphabetic

最終效果

下一篇：9個(gè)JQuery和5個(gè)JavaScript經(jīng)典面試題