canvas 实现 github404动态效果

pumpkin9 发布于2019-08-29 13:48 / 413人阅读

摘要：使用来完成的动态效果前几天使用样式和致敬了一下的类似界面，同时最近又接触了，本着瞎折腾的想法便借着之前的的算法，使用来完成了的动态效果。效果图文件目录文件资源文件源码与图片在文章末尾给出代码网页的部分这里给定义好宽和高设为块级元素。

使用canvas来完成github404的动态效果

前几天使用css样式和js致敬了一下github404的类似界面，同时最近又接触了canvas，本着瞎折腾的想法,便借着之前的js的算法，使用canvas来完成了github404的动态效果。

效果图

文件目录

文件资源

文件源码与图片在文章末尾给出

代码

网页的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来完成这个动态效果，使我更多的了解了canvas的用法。同时使我
对于使用json对象去封装数据和方法，如何组织代码都有了更深的一些了解。

源项目地址

GPU云服务器云服务器 github404 html歌词动态效果 html加载动态效果 js免费动态效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112719.html

canvas 实现 github404动态效果

摘要：使用来完成的动态效果前几天使用样式和致敬了一下的类似界面，同时最近又接触了，本着瞎折腾的想法便借着之前的的算法，使用来完成了的动态效果。效果图文件目录文件资源文件源码与图片在文章末尾给出代码网页的部分这里给定义好宽和高设为块级元素。使用canvas来完成github404的动态效果前几天使用css样式和js致敬了一下github404的类似界面，同时最近又接触了canvas，本着瞎...

impig33 2019-08-21 17:35 评论0 收藏0
hexo高阶教程：next主题优化之加入网易云音乐、网易云跟帖、炫酷动态背景、自定义样式，打造属于你

摘要：我选择的是万网，阿里下面的。然后在主题配置文件下添加主题配置文件中添加自定义样式不得不说还是很人性化的，你可以个性化定制你的网站，你所有的改动需要放在主题文件的文件中，会前言本篇文章是在已经搭建好gitpage+hexo的博客的前提下（不懂怎么搭建的可以参考我的另一篇博文：了解githubPages+hexo搭建博客的原理或者利用Gitpage+hexo开发自己的博客，这两篇博文...

weizx 2019-08-29 12:24 评论0 收藏0
hexo高阶教程：next主题优化之加入网易云音乐、网易云跟帖、炫酷动态背景、自定义样式，打造属于你

摘要：我选择的是万网，阿里下面的。然后在主题配置文件下添加主题配置文件中添加自定义样式不得不说还是很人性化的，你可以个性化定制你的网站，你所有的改动需要放在主题文件的文件中，会前言本篇文章是在已经搭建好gitpage+hexo的博客的前提下（不懂怎么搭建的可以参考我的另一篇博文：了解githubPages+hexo搭建博客的原理或者利用Gitpage+hexo开发自己的博客，这两篇博文...

SoapEye 2019-08-20 15:39 评论0 收藏0
hexo高阶教程：next主题优化之加入网易云音乐、网易云跟帖、炫酷动态背景、自定义样式，打造属于你

摘要：我选择的是万网，阿里下面的。然后在主题配置文件下添加主题配置文件中添加自定义样式不得不说还是很人性化的，你可以个性化定制你的网站，你所有的改动需要放在主题文件的文件中，会前言本篇文章是在已经搭建好gitpage+hexo的博客的前提下（不懂怎么搭建的可以参考我的另一篇博文：了解githubPages+hexo搭建博客的原理或者利用Gitpage+hexo开发自己的博客，这两篇博文...

neuSnail 2019-08-01 16:37 评论0 收藏0