Canvas入门（3）:图像处理和绘制文字

来源：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(