-
context.drawImage(image, dx, dy);
context.drawImage(image, dx, dy, dw, dh);
// image 圖片
// dx dy 坐標(biāo)
// dw dh 要繪制的寬高
context.drawImage( image, sx, sy, sw, sh, dx, dy, dw, dh);
// sx sy
查看全部 -
imageData.data如何存儲(chǔ)像素信息示意圖
查看全部 -
選取原圖中的部分內(nèi)容展示到畫布上
查看全部 -
叢原位置開始渲染
查看全部 -
drawImage查看全部
-
drawImage()有三個(gè)重載方法
drawImage( image , dx , dy )
drawImage( image , dx , dy , dw , dh )
drawImage( image , sx , sy , sw , sh , dx , dy , dw , dh )
查看全部 -
圖片的大小（寬和高）最好是canvas的大小（寬和高）的整數(shù)倍，這樣最容易看出放大效果且圖片不會(huì)被拉伸變形，即使不是倍數(shù)，也一定要比canvas的大小要更大，才能看放大效果。
查看全部 -
12345
查看全部 -
123456
查看全部 -
putImageData
查看全部 -
drawImage參數(shù)
查看全部 -
drawImage查看全部
-
畫布到畫布查看全部
-
畫布到畫布查看全部
-
BUG修復(fù)：老師這種模糊濾鏡寫法存在邊緣無(wú)法模糊的情況，我無(wú)意中添加一點(diǎn)代碼即可修復(fù)這個(gè)bug，在遍歷周圍點(diǎn)的循環(huán)后面再進(jìn)行一次遍歷周圍點(diǎn)的循環(huán)，將前一次求得的平均值賦給后面一次的每一個(gè)點(diǎn)，即： //這里獲得周圍點(diǎn)的累加顏色值 for(let dx=-blurR; dx<=blurR; dx++) { for(let dy=-blurR; dy<=blurR; dy++) { var x = i + dx; var y = j + dy; var p = x*canvasb.width + y; totalr += templateData.data[p*4+0]; totalg += templateData.data[p*4+1]; totalb += templateData.data[p*4+2]; } } //將上面的循環(huán)獲得的顏色值平均值賦給周圍的所有點(diǎn)，這樣就能解決邊緣無(wú)法模糊的bug for(let dx=-blurR; dx<=blurR; dx++) { for(let dy=-blurR; dy<=blurR; dy++) { var x = i + dx; var y = j + dy; var p = x*canvasb.width + y; imageData.data[p*4+0] = totalr/totalNum; imageData.data[p*4+1] = totalg/totalNum; imageData.data[p*4+2] = totalb/totalNum; } }查看全部
舉報(bào)
0/150
提交
取消