为了账号安全,请及时绑定邮箱和手机立即绑定

已采纳回答 / 沐oo音
要找一张比画布大的图片才可以看出效果
外面的那层判断可以不需要,四层循环已经可以了
i j 直接从0开始遍历,当blurR半径比较大的时候,越界的像素点用另一边的像素点补充,边缘就可以模糊一些了,虽然效率有点慢,哈哈哈,四层循环里面判断下x y的值就可以了
for(let k = 0; k < blurR; k++){
if( x < 0){
x += canvasb.height;
}else if(x > canvasb.height - 1){
x -= canvasb.height; }
if( y < 0){
y += canvasb.width;
}else if(y > canvasb.width - 1){
y -= canvasb.width;}
}

最新回答 / JackeyT
这个问题有意思,就是饱和度的计算公式,有了这个公式就和灰度效果的实现差不多
第一个:
var imageWidth = canvas.width * scale;
var imageHeight = canvas.height * scale;
var x = (imageWidth - canvas.width) / (2*scale);
var y = (imageHeight - canvas.height)/ (2*scale);
context.drawImage( image , x , y , canvas.width/scale , canvas.height/scale , 0 , 0 , canvas.width , canvas.height )
第一种方法,只是假想扩大了,其实并没有,所以最后的坐标跟长宽还要改回去,应该是
context.drawImage( image , sx/scale , sy/scale , canvas.width/scale , canvas.height/scale , 0 , 0 , canvas.width , canvas.height )
https://www.zhihu.com/question/30262900
下载案例中的blurEffect()的blurR半径调整到30的时候, 明显发现周围一圈没有被模糊,算法还有待改进。
var mousedown = false
slider.onmousedown = function () {
mousedown = true
}
slider.onmouseup = function () {
mousedown = false
}
slider.onmousemove = function () {
if (mousedown) {
scale = this.value
drawImageByScale(scale)
}
}

最赞回答 / Serena_Cecilia
自己回答一下,果然是因为图片引用上出问题了,如果放img文件夹中,引用应该写为“../img/img.jpg”
温馨提示:img-lg这个图片本来是大的,绘制到canvas上的时候缩小了,使用放大镜绘制的时候,直接使用了这个图片,都是据此计算的
为什么我canvasb 总是看成 canva sb
是不是很酷?大家加油!
老师的口头禅,哈哈哈
课程须知
本课程是《炫丽的倒计时效果——canvas绘图和动画基础》和《canvas绘图详解》这两门课程的进一步深入。将教会大家使用canvas编写属于自己的图像算法,创建出炫丽的效果!
老师告诉你能学到什么?
1、使用canvas将图像渲染在画布上; 2、离屏canvas; 3、使用canvas进行像素级操作。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消