Getting Started with Canvas (3): Image Processing and Drawing Text_html/css_WEB-ITnose

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事件实现边绘制边加载

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

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: // 获取渐变对象

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

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事件实现边绘制边加载

  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) : 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: // 设置文字属性

  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