canvas使用图像(绘制图、图像平铺、图像剪裁、像素处理、绘制文字)

整个流程中所用到的主要Canvas API有：

绘制图像：drawImage()
获取图像数据：getImageData()
重写图像数据：putImageData()
导出图像：toDataURL()

1. 绘制图像

顾名思义，该方法就是用于将图像绘制于Canvas画布当中，具体用法有三种：

① 在画布上定位图像：
context.drawImage(img,x,y)
② 在画布上定位图像，并规定图像的宽度和高度（缩放）：
context.drawImage(img,x,y,width,height)
③ 剪切图像，并在画布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

绘制图像.png

    
    


    
    您的浏览器尚不支持canvas
    
    

image.png

2.图像平铺

drawImage()方法实现

    
    


    
    您的浏览器尚不支持canvas
    
    

效果：

image.png

createPattern()方法实现

createPattern() 方法在指定的方向内重复指定的元素。元素可以是图片、视频，或者其他 元素。被重复的元素可用于绘制/填充矩形、圆形或线条等等。

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

image.png

效果：

image.png

3.图像剪裁

使用图形上下文不带参数的clip()方法来实现Canvas图形裁切功能，该方法会使用先创建好的路径对canvas设置裁剪区域，裁剪指定区域显示内容。裁剪是对画布进行的，裁剪后的画布是不能恢复到原来的大小，因此使用save及restore。

    
    
    



    
        你的浏览器居然不支持Canvas？！赶快换一个吧！！
    

效果：

image.png

4.像素处理

我们可以直接从HTML5 canvas中获取单个像素。通过ImageData对象我们可以以读写一个数据数组的方式来操纵像素数据。当完成像素操作之后，如果要显示它们，需要将这些像素复制到canvas上。

创建一个ImageData对象

var imageData = context.createImageData(width, height);

ImageData对象代表canvas中某个区域的底层像素数据。它包含三个只读的属性：

width：图像的宽度，单位像素。
height：图像的高度，单位像素。
data：包含像素值的一维数组。

在data数组中的每一个像素包含4个字节的值。也就是说每一个像素由4个字节表示，每一个字节分别表示红色，绿色，蓝色和一个透明度alpha通道（RGBA）。

复制像素到canvas上

var canvasX = 25;
var canvasY = 25;
context.putImageData(imageData, canvasX, canvasY);

putImageData()函数将它们复制到canvas上。putImageData()函数有两种格式。第一种格式是复制所有的像素到canvas中。canvasX和canvasY参数是canvas上插入像素的x和y坐标。

context.putImageData(imageData, canvasX, canvasY,
    sx, sy, sWidth, sHeight);

sx和sy参数（sourceX 和 sourceY）是矩形左上角的x和y坐标。
sWidth和sHeight参数（sourceWidth 和 sourceHeight）是矩形的宽度和高度。

从canvas中获取像素

我们也可以从canvas上获取一个矩形区域的像素到一个ImageData对象中。通过getImageData函数可以完成这个操作。

var imageData2 = context.getImageData(x, y, width, height);

x和y参数是从canvas上获取的矩形的左上角的坐标。

width和height参数是从canvas上获取的矩形的宽度和高度。

5.绘制文字

我们可以在HTML5 canvas上绘制绘制文字，并且可以设置文字的字体，大小和颜色。
绘制文字的字体由font属性来控制。如果你需要使用颜色来填充文字或制作描边文字，可以使用fillStyle和strokeStyle属性来完成。
要在canvas上绘制文字，可以通过的fillText()函数或strokeText()函数来完成。

fillText(text, x, y, [maxWidth])
strokeText(text, x, y, [maxWidth])

表示在(x,y)的位置，绘制text的内容。可选参数maxWidth为文本的最大宽度，单位为像素。如果设置了该属性，当文本内容宽度超过该参数值，则会自动按比例缩小字体，使文本的内容全部可见；未超过时，则以实际宽度显示。如果未设置该属性，当文本内容宽度超过画布宽度时，超出的内容将被隐藏。

效果：

image.png