-
context.drawImage(image, dx, dy);
context.drawImage(image, dx, dy, dw, dh);
// image 图片
// dx dy 坐标
// dw dh 要绘制的宽高
context.drawImage( image, sx, sy, sw, sh, dx, dy, dw, dh);
// sx sy
查看全部 -
imageData.data如何存储像素信息示意图
查看全部 -
选取原图中的部分内容展示到画布上
查看全部 -
丛原位置开始渲染
查看全部 -
drawImage查看全部
-
drawImage()有三个重载方法
drawImage( image , dx , dy )
drawImage( image , dx , dy , dw , dh )
drawImage( image , sx , sy , sw , sh , dx , dy , dw , dh )
查看全部 -
图片的大小（宽和高）最好是canvas的大小（宽和高）的整数倍，这样最容易看出放大效果且图片不会被拉伸变形，即使不是倍数，也一定要比canvas的大小要更大，才能看放大效果。
查看全部 -
12345
查看全部 -
123456
查看全部 -
putImageData
查看全部 -
drawImage参数
查看全部 -
drawImage查看全部
-
画布到画布查看全部
-
画布到画布查看全部
-
BUG修复：老师这种模糊滤镜写法存在边缘无法模糊的情况，我无意中添加一点代码即可修复这个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; totalr += templateData.data[p*4+0]; totalg += templateData.data[p*4+1]; totalb += templateData.data[p*4+2]; } } //将上面的循环获得的颜色值平均值赋给周围的所有点，这样就能解决边缘无法模糊的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; } }查看全部
举报
0/150
提交
取消