帆布实施github404动态效果的示例代码

前几天，我用CSS样式和JS来迎接github404相似的界面。同时，我最近接触了画布。在制造混乱，它的精神，我用JS算法之前完成github404帆布的动态效果。

设计素描
文件目录
文献资源

文章结尾给出了文件源和图片。

代码
网页的正文部分

画布是这里定义为宽和高，设置为一个块级元素。这些IMG标签加载这些图片，我们不必在JS加载它，然后图片设置为不显示显示：无。
<帆布id =myCanvaswidth=1680height=630
样式=空白：0；显示：块>
您的浏览器不支持画布。

js的一部分
1。我已经建立了一个新的JSON对象称为github404封装所有的参数和方法

2，再次创造imgdata对象，和进口所需的所有参数由IMG PS：顶部和左侧的定位当DrawImage（）方法。缩放参数用于计算鼠标移动时相应的图像运动计算。

的3.init（）方法用于初始化与外部接口

4，实施制图方法遍历imgdata { }的循环，然后把它反过来，最后战平DrawImage（）方法。只有在移动绘图的方法，我们需要注意的ctx.clearrect使用（）空画布上的方法。
无功github404 = { {
imgdata：{ / /所有图片信息与JSON对象的记录
{ BG：
顶部：0，
左：110，上/左，左，用于定位，在绘图中使用。
输入框：相应的图片/路径
刻度：0.06，当鼠标移动时，图像对应移动的比例。
}，
building_2：{
顶部：133，
左：1182，
SRC：'。 / / building_2 PNG格式的图像，
规模：0.05，
}，
building_1：{
顶部：79，
左：884，
SRC：'。 / / buliding_1 PNG格式的图像，
规模：0.03，
}，
speeder_shadow：{
顶部：261，
左：776，
SRC：'。 / / speeder_shadow PNG格式的图像，
规模：0.01，
}，
cat_shadow：{
顶部：288，
左：667，
SRC：'。 / / cat_shadow PNG格式的图像，
规模：0.02，
}，
变速器：{
顶部：146，
左：777，
SRC：'。 /图像/调速。png，
规模：0.01，
}，
{猫：
顶部：88，
左：656，
SRC，
规模：0.05，
}，
正文：{
顶部：70，
左：364，
SRC，
规模：0.03，
}，
}，
rate_w：0，
rate_h：0 / /偏移率
field_width：1680，
370 / / field_height：，高度和宽度的背景
帆布：document.queryselector（' # myCanvas）、帆布/元素

init：（函数）初始化加载方法
This.setRateWH（）；
This.placeImg（）；
This.attachMouseEvent（）；
}，
setratewh：（函数）计算比{ / /偏移的方法
无功window_width = document.body.clientwidth；
无功window_height = document.body.clientheight；
this.rate_w =这。field_width / window_width；
this.rate_h =这。field_height / window_height；
}，

PlaceImg：（功能）{ / /初始化绘图方法
让CTX = this.canvas.getcontext（二维的）； / /刷
对于（关键在这。imgdata）{ / /遍历数据对象
新图像（）；
VaR左=这。imgdata {key}。左；
var =这。imgdata {key}。顶；
image.src =这。imgdata {key}。SRC；
ctx.drawimage（图像，左，上，
image.width高度），图像；
}

}，

attachmouseevent：函数（）{
var =；
document.body.onmousemove =功能（e）{
that.picmove（e.pagex，e.pagey）；
}
}，
PicMove：功能（pagex，pagey）{ / /图来当鼠标移动的方法
让CTX = this.canvas.getcontext（二维的）；
ctx.clearrect（0,0，this.canvas.width，这个画布。高度）；
对于（关键在这。imgdata）{
新图像（）；
无功offer_w = this.rate_w * pagex *本。imgdata {key}。规模；
无功offer_h = this.rate_h * pagey *本。imgdata {key}。规模；
将左和顶部定义为绘图参数以下的位置。
VaR左=这。field_width / 100 offer_w +本。imgdata {key}。左；
var =这。field_height / 100 offer_h +本。imgdata {key}。顶；
image.src =这。imgdata {key}。SRC；
ctx.drawimage（图像，左，上，
image.width高度），图像；
}
}
}

在window.onload =函数（）{
/ / init方法只需调用github404数据包
Github404.init ();
}
总结

这次用画布来完成这个动态效果，我对画布的用法有了更多的了解。

深入了解JSON对象是如何用来封装数据和方法以及如何组织代码的。

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。