Source: http://www.ido321.com/997.html

1. Image processing (unless otherwise specified, all results are from the latest version of Google)

In HTML 5, the Canvas API can not only be used to draw graphics, but can also be used to process image files on the network or disk, and then draw them in the canvas. When drawing an image, you need to use the drawImage() method:

drawImage(image,x,y): image is an image reference, x,y is the starting position in the canvas when drawing the image

drawImage(image,x,y,w,h): The first three are the same as above, w and h are the width and height of the image when drawing, which can be used to scale the image

drawImage(image,sx,sy, sw,sh,dx,dy,dw.dh): Copy all or part of the drawn image in the canvas to another location on the canvas. sx, sy, sw, sh are respectively the starting position, width and height of the copied area in the original image, and dx, dy, dw, dh represent the starting position, height and width of the copied image in the canvas.

   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 event implements loading while drawing

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

Effect:

1. Image tiling

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

Effect:

In HTML 5, tiling can also be achieved using context.createPattern(image,type), and the type value is the same The tiling values ??of background-image are the same.

   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: };

can also achieve tiling (the image is not scaled, so It is the original image size and tiled)

2. Image cropping

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

Effect:

3. Pixel processing

   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) : Indicates getting the starting coordinates and height and width of the pixel area, and returning a CanvasPixelArray object with attributes such as width, height, and data. The data attribute stores an array of pixel data, in the shape of [r1, g1, b1, a1, r2, g2, b2, a2...], r1, g1, b1, a1 are the red, green and blue values ????and transparency of the first pixel respectively, and so on.

putImageData(imagedata,dx,dy[,dirtyx,dirtyy,dirtyWidth,dirtyHeight]): Redraw pixel data onto the image. imagedata is a pixel array, dx, dy represent the starting position of redrawing, and the next four parameters give the upper left corner coordinates and height and width of a rectangle.

The pixel operation of Canvas API is only supported by some browsers, and the screenshot effect comes from the new version of Firefox

2. Draw text

   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]): The first three are not explained. maxwidth represents the maximum width of displayed text, which can prevent text from overflowing

strokeText(string ,x,y[,maxwidth]: Same as above.

Text attribute settings

font: Set font

textAlign: horizontal alignment, the value can be start/end/left /right/center. The default is start

textBaseline: vertical alignment, the value can be top/hanging/middle/alphabetic/ideographic/bottom. The default is alphabetic

Final effect

Next article: 9 JQuery and 5 JavaScript classic interview questions