❶ canvas使用图像(绘制图、图像平铺、图像剪裁、像素处理、绘制文字)
绘制图像：drawImage()
获取图像数据：getImageData()
重写图像数据：putImageData()
导出图像：toDataURL()
顾名思义，该方法就是用于将图像绘制于Canvas画布当中，具体用法有三种：
① 在画布上定位图像：
context.drawImage(img,x,y)
② 在画布上定位图像，并规定图像的宽度和高度（缩放）：
context.drawImage(img,x,y,width,height)
③ 剪切图像，并在画布上定位被剪切的部分：
context.drawImage(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为文本的最大宽度，单位为像素。如果设置了该属性，当文本内容宽度超过该参数值，则会自动按比例缩小字体，使文本的内容全部可见；未超过时，则以实际宽度显示。如果未设置该属性，当文本内容宽度超过画布宽度时，超出的内容将被隐藏。
效果：
❷ canvas保存的图片模糊解决办法
上网网络了半天，都是乘以一个叫ratio的东西，也没成，可能是自己弄错了吧。
然后什么都没有乘，改了一个地方，好了
尺寸还要是之前的尺寸，不然还会模糊
❸ java 中如何将画在画布上的图形清除（从canvas类继承的画布类）比如清除画在画布上的一个点
清除方法一、
在图片的位置接着画一个矩形覆盖这个图片，并且把颜色设置成和背景色一样就OK了！
代码如下：
context.fillStyle="ffffff";//白色为例子；
context.fillRect(400,100,400,100);
注意，上面的代码要放在imageObj.onload里面才有效果；
清除的方法二、
用clearRect()方法，代码如下：
context.clearRect(400,100,imageObj.width,100);//清除画布上的指定区域；
注意，上面的代码要放在imageObj.onload里面才有效果；
❹ canvas图片处理，求教ps像素级高手。美图秀秀，ps等软件都有一些图片风格特效，比如lomo，灰化，水下效果
Photoshop图层混合模式计算公式大全
关于photoshop的图层混合模式，大家一定都非常熟悉了，我在这里把各种混合模式的计算公式都详细的描述一便，希望能够对大家理解图层的混合模式有所帮助，编写仓促，不足之处请多批评指正。
混合模式可以将两个图层的色彩值紧密结合在一起，从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面我将介绍photoshopcs2中所有混合模式的数学计算公式。另外还介绍了不透明度。下面所介绍的公式仅适用于RGB图像。对于Lab颜色图像而言，这些公式将不再适用。
Opacity
不透明度
C=d*A+(1-d)*B
相对于不透明度而言，其反义就是透明度。这两个术语之间的关系就类似于正负之间的关系：100%的不透明度就是0%的透明度。该混合模式相对来说比较简单，在该混合模式下，如果两个图层的叠放顺序不一样，其结果也是不一样的（当然50%透明除外）。
该公式中，A代表了上面图层像素的色彩值（A=像素值/255），d表示该层的透明度，B代表下面图层像素的色彩值（B=像素值/255），C代表了混合像素的色彩值（真实的结果像素值应该为255*C）。该公式也应用于层蒙板，在这种情况下，d代表了蒙板图层中给定位置像素的亮度，下同，不再叙述。
Darken
变暗
B<=A:C=B
B>=A:
C=A
该模式通过比较上下层像素后取相对较暗的像素作为输出，注意，每个不同的颜色通道的像素都是独立的进行比较，色彩值相对较小的作为输出结果，下层表示叠放次序位于下面的那个图层，上层表示叠放次序位于上面的那个图层，下同，不再叙述。
Lighten
变亮
B<=A:C=A
B>A:C=B
该模式和前面的模式是相似，不同的是取色彩值较大的（也就是较亮的）作为输出结果。
Multiply
正片叠底
C=A*B
该效果将两层像素的标准色彩值（基于0..1之间）相乘后输出，其效果可以形容成：两个幻灯片叠加在一起然后放映，透射光需要分别通过这两个幻灯片，从而被削弱了两次。
Screen
滤色
C=1-(1-A)*(1-B)也可以写成
1-C=(1-A)*(1-B)
该模式和上一个模式刚好相反，上下层像素的标准色彩值反相后相乘后输出，输出结果比两者的像素值都将要亮（就好像两台投影机分别对其中一个图层进行投影后，然后投射到同一个屏幕上）。从第二个公式中我们可以看出，如果两个图层反相后，采用Multiply模式混合，则将和对这两个图层采用Screen模式混合后反相的结果完全一样。
ColorDodge
颜色减淡
C=B/(1-A)
该模式下，上层的亮度决定了下层的暴露程度。如果上层越亮，下层获取的光越多，也就是越亮。如果上层是纯黑色，也就是没有亮度，则根本不会影响下层。如果上层是纯白色，则下层除了像素为255的地方暴露外，其他地方全部为白色（也就是255，不暴露）。结果最黑的地方不会低于下层的像素值。
ColorBurn
颜色加深
C=1-(1-B)/A
该模式和上一个模式刚好相反。如果上层越暗，则下层获取的光越少，如果上层为全黑色，则下层越黑，如果上层为全白色，则根本不会影响下层。结果最亮的地方不会高于下层的像素值。
LinearDodge
线形减淡
C=A+B
将上下层的色彩值相加。结果将更亮。
LinearBurn
线形加深
C=A+B-1
如果上下层的像素值之和小于255，输出结果将会是纯黑色。如果将上层反相，结果将是纯粹的数学减。
Overlay
叠加
B<=0.5:C=2*A*B
B>0.5:
C=1-2*(1-A)*(1-B)
依据下层色彩值的不同，该模式可能是Multiply，也可能是Screen模式。
上层决定了下层中间色调偏移的强度。如果上层为50%灰，则结果将完全为下层像素的值。如果上层比50%灰暗，则下层的中间色调的将向暗地方偏移，如果上层比50%灰亮，则下层的中间色调的将向亮地方偏移。对于上层比50%灰暗，下层中间色调以下的色带变窄（原来为0~2*0.4*0.5，现在为0~2*0.3*0.5），中间色调以上的色带变宽（原来为2*0.4*0.5~1，现在为2*0.3*0.5~1）。反之亦然。
HardLight
强光
A<=0.5:C=2*A*B
A>0.5:
C=1-2*(1-A)*(1-B)
该模式完全相对应于Overlay模式下，两个图层进行次序交换的情况。如过上层的颜色高于50%灰，则下层越亮，反之越暗。
SoftLight
柔光
A<=0.5:C=(2*A-1)*(B-B*B)+B
A>0.5:
C=(2*A-1)*(sqrt(B)-B)+B
该模式类似上层以Gamma值范围为2.0到0.5的方式来调制下层的色彩值。结果将是一个非常柔和的组合。
VividLight
亮光
A<=0.5:C=1-(1-B)/2*A
A>0.5:
C=B/(2*(1-A))
该模式非常强烈的增加了对比度，特别是在高亮和阴暗处。可以认为是阴暗处应用ColorBurn和高亮处应用ColorDodge。
LinearLight
线形光
C=B+2*A-1
相对于前一种模式而言，该模式增加的对比度要弱些。其类似于Linear
Burn,只不过是加深了上层的影响力。
PinLight
点光
B<2*A-1:
C=2*A-1
2*A-1<B<2*A:C=B
B>2*A:
C=2*A
该模式结果就是导致中间调几乎是不变的下层，但是两边是Darken和Lighte年模式的组合。
HardMix
实色混合
A<1-B:C=0
A>1-B:
C=1
该模式导致了最终结果仅包含6种基本颜色，每个通道要么就是0，要么就是255。
Difference
差值
C=|A-B|
上下层色调的绝对值。该模式主要用于比较两个不同版本的图片。如果两者完全一样，则结果为全黑。
Exclusion
排除
C=A+B-2*A*B
亮的图片区域将导致另一层的反相，很暗的区域则将导致另一层完全没有改变。
Hue
色相
HcScYc=HASBYB
输出图像的色调为上层，饱和度和亮度保持为下层。对于灰色上层，结果为去色的下层。
Saturation
饱和度
HcScYc=HBSAYB
输出图像的饱和度为上层，色调和亮度保持为下层。
Color
颜色
HcScYc=HASAYB
输出图像的亮度为下层，色调和饱和度保持为上层。
Luminosity
亮度
HcScYc=HBSBYA
输出图像的亮度为上层，色调和饱和度保持为下层。
Dissolve
溶解
该模式根本不是真正的溶解，因此并不是适合Dissolve这个称谓，其表现仅仅和Normal类似。其从上层中随机抽取一些像素作为透明，使其可以看到下层，随着上层透明度越低，可看到的下层区域越多。如果上层完全不透明，则效果和Normal不会有任何不同。
❺ canvas使用图片
引入图像到canvas里需要以下两步基本操作：
HTMLImageElement
这些图片是由Image()函数构造出来的，或者任何的<img>元素
HTMLVideoElement
用一个HTML的 <video>元素作为你的图片源，可以从视频中抓取当前帧作为一个图像
HTMLCanvasElement
可以使用另一个 <canvas> 元素作为你的图片源。
ImageBitmap
这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。
这些源统一由 CanvasImageSource类型来引用。
有几种方式可以获取到我们需要在canvas上使用的图片
drawImage(image, x, y)
其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
drawImage(image, x, y, width, height)
这个方法多了2个参数：width 和 height，这两个参数用来控制 当向canvas画入时应该缩放的大小
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它8个参数最好是参照右边的图解，前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。