❶ 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個則是定義切片的目標顯示位置和大小。