使用canvas怎么实现一个github404动态效果-创新互联
使用canvas怎么实现一个github404动态效果?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
创新互联专注于企业营销型网站、网站重做改版、定兴网站定制设计、自适应品牌网站建设、HTML5建站、成都商城网站开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为定兴等各大城市提供网站开发制作服务。文件目录
文件资源
文件源码与图片在文章末尾给出
代码
网页的body部分
这里给canvas 定义好宽和高,设为块级元素。这些img 标签是将这些图片加载出来,我们就不用在js中去加载了,再将图片设为不显示 display:none。
js部分
1.这里我还是新建了一个名为github404的json对象,以对所有的参数和方法进行封装
2.再创建imgData的对象,将所有的img所需的参数传入ps:top和left用于 drawImage() 方法时定位, scale 参数用于计算鼠标移动时对应的图片移动的计算
3.init()方法用来初始化,是与外部的接口
4.画图方法的实现就是用 for in 循环遍历 imgData[],再依次赋值,最后用drawImage()方法绘画,只是在移动的绘图方法中,需要注意使用了ctx.clearRect() 方法先将画布清空。
关于使用canvas怎么实现一个github404动态效果问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。
本文题目:使用canvas怎么实现一个github404动态效果-创新互联
文章转载:http://myzitong.com/article/dosgpd.html