为了账号安全，请及时绑定邮箱和手机立即绑定
首页 免费课 Canvas玩儿转红包照片 问答

Canvas玩儿转红包照片

liuyubobobo 全栈工程师
查看讲师更多课程 liuyubobobo讲师的其他课程
难度中级
时长 1小时17分
学习人数
综合评分9.53
94人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.4 逻辑清晰
全部 评论 问答 未解决 精华
词不达意__
reset不会归位的话，可以把定时器的t设为全局变量，在reset函数里面第一行添加clearInterval（t）,就OK了。为防止连续点很多次show按钮产生过多的定时器，最后在show函数里第一行也添加clearInterval（t）
2 3-5 思考，扩展
2016-11-11
beryl20120308
老师真牛！！！
0 3-3 建立交互逻辑
2016-11-08
nc1199
放大后图片和canvas不再一个位置的原因是因为之前的canvas设置的宽高为固定的800*600，所以要解决偏移的问题也就2点。1、判断：当window.innerWidth < 992 的时候，设置blur-div和blur-image的宽高为800*600，同时将canvasWidth和canvasHeight也设置为800、600。2、判断：当window.innerWidth < 992 的时候，context.drawImage（image，0，0，800，600）；不过这个时候还要注意initCanvas和show这两个函数对于drawImage在Width<992时的关系
0 4-1 适应移动端屏幕尺寸
2016-11-07
小小的坏3405753
解决bug：
在reset方法里加一个条件限制一下就ok了
function reset() {
if(clippingRegion.r>1000||clippingRegion.r==radius){
initCanvas();
}
}
0 3-4 动画效果
2016-10-31
你若活得精彩上天自有安排
不错不错，赞
0 1-1 开始用canvas玩儿转红包照片吧！
2016-10-29

两个js文件有吗？？？blur.js文件怎么写

最新回答 / 小吵小闹1217
现在只是一个空文件，以后会添加内容的
2 回答 1454 浏览 2-1 工程的创建
2016-10-27

老师canvas的图片只设置宽和高 不会使图片缩放怎么办 ？

最新回答 / nc1199
去了解下drawimage更详细的API后你就会完全了解canvas的绘图机制了~或者你看看这个视频http://www.imooc.com/learn/338 里面就有清楚的讲解~
1 回答 3147 浏览 3-2 绘制图像及使用剪辑区域
2016-10-26
一直都在路上
老师canvas的图片只设置宽和高 不会使图片缩放怎么办 ？
0 3-2 绘制图像及使用剪辑区域
2016-10-26
qq_黑桃丶K_0
1房3人333
0 3-1 使用canvas
2016-10-26
qq_黑桃丶K_0
show未定义？怎么回事
1 3-3 建立交互逻辑
2016-10-26
一直都在路上
感觉有点炸
0 4-2 两个小问题
2016-10-26
qq_黑桃丶K_0
js没有调用 老师为什么能有变化
0 3-1 使用canvas
2016-10-25
慕尼黑5311549
对角线也不行，移动端还是有问题==。
0 3-4 动画效果
2016-10-19
慕尼黑5311549
有偏移量是因为图片的宽或高小于Canvas的宽或高，老师代码变量取反写错了（没有考虑到topMargin可能是负数），数值类型前面直接加负号即可，可比较：
alert(-topMargin);alert("-"+topMargin);
1 4-1 适应移动端屏幕尺寸
2016-10-19
慕粉3584185
老师，考虑一下去讲SVG不？强烈建议！！！！！！！！！
2 1-1 开始用canvas玩儿转红包照片吧！
2016-10-19
慕尼黑5311549
关于bug：那就直接使用对角线啊
0 3-4 动画效果
2016-10-19
首页上一页3456789下一页尾页
开始学习
课程须知
需掌握canvas的基本用法。建议先学习《炫丽的倒计时效果Canvas绘图与动画基础》,《Canvas绘图详解》与《Canvas玩转图像处理》三门课程中的基础部分。更详细的课程所需基础知识，可参见本课程1-2小节。
老师告诉你能学到什么？
实现中图像模糊，图像展示效果； 深入了解canvas； 完成能同时运行在多端的移动web app。

微信扫码，参与3人拼团

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

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

查看已购买的课程

本次提问将花费2个积分

你的积分不足，无法发表

为什么扣积分？
确认 取消

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分？
确认 取消

举报

0/150
提交
取消