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

绘制图像：drawImage()

获取图像数据：getImageData()

重写图像数据：putImageData()

导出图像：toDataURL()

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

① 在画布上定位图像：

contextdrawImage(img,x,y)

② 在画布上定位图像，并规定图像的宽度和高度（缩放）：

contextdrawImage(img,x,y,width,height)

③ 剪切图像，并在画布上定位被剪切的部分：

contextdrawImage(img,sx,sy,swidth,sheight,x,y,width,height)

效果：

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

效果：

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

效果：

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

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

width：图像的宽度，单位像素。

height：图像的高度，单位像素。

data：包含像素值的一维数组。

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

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

sx和sy参数（sourceX 和 sourceY）是矩形左上角的x和y坐标。

sWidth和sHeight参数（sourceWidth 和 sourceHeight）是矩形的宽度和高度。

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

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

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

我们可以在HTML5 canvas上绘制绘制文字，并且可以设置文字的字体，大小和颜色。

绘制文字的字体由font属性来控制。如果你需要使用颜色来填充文字或制作描边文字，可以使用fillStyle和strokeStyle属性来完成。

要在canvas上绘制文字，可以通过的fillText()函数或strokeText()函数来完成。

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

效果：

canvaswidth获取的是写在标签属性中的宽度值，eg :<canvas width="800" height="600"></canvas>

这时我们获取的canvas的宽度值是800px;但是如果canvas标签没有设置宽高属性，而是写在css样式表，或者style标签中，canvaswidth获取的是canvas的默认宽（canvas默认宽是300px,默认高是150px）

以上就是关于canvas使用图像(绘制图、图像平铺、图像剪裁、像素处理、绘制文字)全部的内容，包括:canvas使用图像(绘制图、图像平铺、图像剪裁、像素处理、绘制文字)、js获取canvas 的宽和高，到底是多少、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！