canvas如何实现github404动态
这次给大家带来canvas如何实现github404动态，用canvas实现github404动态的注意事项有哪些，下面就是实战案例，一起来看一下。
前几天使用css样式和js致敬了一下github404的类似界面，同时最近又接触了canvas，本着瞎折腾的想法,便借着之前的js的算法，使用canvas来完成了github404的动态效果。
文件资源
文件源码与图片在文章末尾给出
代码
网页的body部分
这里给canvas 定义好宽和高,设为块级元素。这些img 标签是将这些图片加载出来，我们就不用在js中去加载了，再将图片设为不显示 display:none。
<body>
<canvas id="mycanvas" width="1680" height="630"
style="margin:0;display:block">
您的浏览器不支持canvas
</canvas>
<img src="./images/field.png" style="display:none">
<img src="./images/text.png" style="display:none">
<img src="./images/cat.png" style="display:none">
<img src="./images/cat_shadow.png" style="display:none">
<img src="./images/speeder.png" style="display:none">
<img src="./images/speeder_shadow.png" style="display:none">
<img src="./images/buliding_1.png" style="display:none">
<img src="./images/building_2.png" style="display:none">
</body>js部分
1.这里我还是新建了一个名为github404的json对象，以对所有的参数和方法进行封装
2.再创建imgData的对象，将所有的img所需的参数传入ps:top和left用于 drawImage() 方法时定位, scale 参数用于计算鼠标移动时对应的图片移动的计算
3.init()方法用来初始化，是与外部的接口
4.画图方法的实现就是用 for in 循环遍历 imgData[],再依次赋值,最后用drawImage()方法绘画，只是在移动的绘图方法中，需要注意使用了ctx.clearRect() 方法先将画布清空。
<script>
var github404 = {
imgData: {//将所有图片的信息用json对象记录
bg: {
top: 0,
left: 110,//top和left用于定位，在画图时使用
src: './images/field.png',//对应图片路径
scale: 0.06,//鼠标移动时，该图片所对应移动的比例
},
building_2: {
top: 133,
left: 1182,
src: './images/building_2.png',
scale: 0.05,
},
building_1: {
top: 79,
left: 884,
src: './images/buliding_1.png',
scale: 0.03,
},
speeder_shadow: {
top: 261,
left: 776,
src: './images/speeder_shadow.png',
scale: 0.01,
},
cat_shadow: {
top: 288,
left: 667,
src: './images/cat_shadow.png',
scale: 0.02,
},
speeder: {
top: 146,
left: 777,
src: './images/speeder.png',
scale: 0.01,
},
cat: {
top: 88,
left: 656,
src: './images/cat.png',
scale: 0.05,
},
text: {
top: 70,
left: 364,
src: './images/text.png',
scale: 0.03,
},
},
rate_w: 0,
rate_h: 0,//偏移的比例
field_width: 1680,
field_height: 370,//背景高度和宽度
canvas: document.querySelector('#mycanvas'),//获得canvas元素
init: function() {//初始化加载方法
this.setRateWH();
this.placeImg();
this.attachMouseEvent();
},
setRateWH: function() {//计算偏移比的方法
var window_width = document.body.clientWidth;
var window_height = document.body.clientHeight;
this.rate_w = this.field_width/window_width;
this.rate_h = this.field_height/window_height;
},
placeImg: function() {//初始化的绘图方法
let ctx = this.canvas.getContext('2d');//获得画笔
for(key in this.imgData){//遍历imageData 对象
var image = new Image();
var left = this.imgData[key].left;
var top = this.imgData[key].top;
image.src = this.imgData[key].src;
ctx.drawImage(image,left,top,
image.width,image.height);
}
},
attachMouseEvent: function() {
var that = this;
document.body.onmousemove = function(e){
that.picMove(e.pageX,e.pageY);
}
},
picMove: function(pageX,pageY) {//鼠标移动时重新画图的方法
let ctx = this.canvas.getContext('2d');
ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
for(key in this.imgData) {
var image = new Image();
var offer_w = this.rate_w * pageX * this.imgData[key].scale;
var offer_h = this.rate_h * pageY * this.imgData[key].scale;
//定义 left和top,下面画图时给参数定位
var left = this.field_width/100 - offer_w + this.imgData[key].left;
var top = this.field_height/100 - offer_h + this.imgData[key].top;
image.src = this.imgData[key].src;
ctx.drawImage(image,left,top,
image.width,image.height);
}
}
}
window.onload = function() {
//只调用github404的init方法 封装了数据
github404.init();
}
</script>总结
此次使用canvas来完成这个动态效果，使我更多的了解了canvas的用法。同时使我
对于使用json对象去封装数据和方法，如何组织代码都有了更深的一些了解。
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
H5的文件域FileReader怎样分段读取文件上传到服务器
用H5的WebGL如何在同一个界面做出json和echarts图表
Atas ialah kandungan terperinci canvas如何实现github404动态. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Tukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya
Mar 25, 2024 am 09:36 AM
Apabila mencipta mesin maya, anda akan diminta untuk memilih jenis cakera, anda boleh memilih cakera tetap atau cakera dinamik. Bagaimana jika anda memilih cakera tetap dan kemudian menyedari bahawa anda memerlukan cakera dinamik, atau sebaliknya. Anda boleh menukar satu kepada yang lain? Dalam siaran ini, kita akan melihat cara menukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya. Cakera dinamik ialah cakera keras maya yang pada mulanya mempunyai saiz kecil dan membesar dalam saiz semasa anda menyimpan data dalam mesin maya. Cakera dinamik sangat cekap dalam menjimatkan ruang storan kerana ia hanya mengambil sebanyak mungkin ruang storan hos seperti yang diperlukan. Walau bagaimanapun, apabila kapasiti cakera berkembang, prestasi komputer anda mungkin terjejas sedikit. Cakera tetap dan cakera dinamik biasanya digunakan dalam mesin maya
Bagaimana untuk menukar cakera dinamik kepada cakera asas pada Windows 11
Sep 23, 2023 pm 11:33 PM
Jika anda ingin menukar cakera dinamik kepada cakera asas dalam Windows 11, anda harus membuat sandaran terlebih dahulu kerana proses itu akan memadamkan semua data di dalamnya. Mengapa anda perlu menukar cakera dinamik kepada cakera asas dalam Windows 11? Menurut Microsoft, cakera dinamik telah ditamatkan dari Windows dan penggunaannya tidak lagi disyorkan. Selain itu, Windows Home Edition tidak menyokong cakera dinamik, jadi anda tidak akan dapat mengakses pemacu logik ini. Jika anda ingin menggabungkan lebih banyak cakera kepada volum yang lebih besar, kami mengesyorkan anda menggunakan Cakera Asas atau Ruang Storan. Dalam artikel ini, kami akan menunjukkan kepada anda cara menukar cakera dinamik kepada cakera asas pada Windows 11 Bagaimana untuk menukar cakera dinamik kepada cakera asas dalam Windows 11? pada permulaannya
Bagaimana untuk mencipta karusel imej dinamik menggunakan HTML, CSS dan jQuery
Oct 25, 2023 am 10:09 AM
Cara menggunakan HTML, CSS dan jQuery untuk mencipta karusel imej dinamik Dalam reka bentuk dan pembangunan tapak web, karusel imej ialah fungsi yang kerap digunakan untuk memaparkan berbilang imej atau sepanduk pengiklanan. Melalui gabungan HTML, CSS dan jQuery, kami boleh mencapai kesan karusel imej dinamik, menambahkan daya hidup dan daya tarikan pada tapak web. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta karusel imej dinamik yang ringkas dan menyediakan contoh kod khusus. Langkah 1: Sediakan persimpangan HTML
Apakah versi html2canvas yang ada?
Aug 22, 2023 pm 05:58 PM
Versi html2canvas termasuk html2canvas v0.x, html2canvas v1.x, dsb. Pengenalan terperinci: 1. html2canvas v0.x, yang merupakan versi awal html2canvas Versi stabil terkini ialah v0.5.0-alpha1. Ia adalah versi matang yang telah digunakan secara meluas dan disahkan dalam banyak projek;
uniapp melaksanakan cara menggunakan kanvas untuk melukis carta dan kesan animasi
Oct 18, 2023 am 10:42 AM
Cara menggunakan kanvas untuk melukis carta dan kesan animasi dalam uniapp memerlukan contoh kod khusus 1. Pengenalan Dengan populariti peranti mudah alih, semakin banyak aplikasi perlu memaparkan pelbagai carta dan kesan animasi pada terminal mudah alih. Sebagai rangka kerja pembangunan merentas platform berdasarkan Vue.js, uniapp menyediakan keupayaan untuk menggunakan kanvas untuk melukis carta dan kesan animasi. Artikel ini akan memperkenalkan cara uniapp menggunakan kanvas untuk mencapai kesan carta dan animasi serta memberikan contoh kod khusus. 2. kanvas
Ketahui rangka kerja kanvas dan terangkan rangka kerja kanvas yang biasa digunakan secara terperinci
Jan 17, 2024 am 11:03 AM
Terokai rangka kerja Kanvas: Untuk memahami apakah rangka kerja Kanvas yang biasa digunakan, contoh kod khusus diperlukan Pengenalan: Kanvas ialah API lukisan yang disediakan dalam HTML5, yang melaluinya kita boleh mencapai kesan grafik dan animasi yang kaya. Untuk meningkatkan kecekapan dan kemudahan melukis, banyak pembangun telah membangunkan rangka kerja Kanvas yang berbeza. Artikel ini akan memperkenalkan beberapa rangka kerja Kanvas yang biasa digunakan dan menyediakan contoh kod khusus untuk membantu pembaca memperoleh pemahaman yang lebih mendalam tentang cara menggunakan rangka kerja ini. 1. Rangka kerja EaselJS Ea
Menghuraikan teg SQL dinamik dalam MyBatis: pilih teg
Feb 24, 2024 pm 12:15 PM
SQL Dinamik ialah salah satu fungsi yang sangat penting dalam rangka kerja MyBatis Ia boleh menyambung dan memproses pernyataan SQL secara dinamik mengikut keadaan yang berbeza untuk mencapai operasi SQL yang fleksibel. Antaranya, teg pemilihan ialah teg utama dalam SQL dinamik, yang digunakan terutamanya untuk melaksanakan logik pemilihan bersyarat. Artikel ini akan meneroka penggunaan teg pilihan dalam MyBatis dan menyediakan contoh kod khusus untuk demonstrasi. 1. Sintaks asas teg pemilihan Terdapat dua bentuk utama teg pemilihan dalam MyBatis:
Cara melukis carta geografi dinamik dan interaktif dengan Python
Sep 28, 2023 pm 09:37 PM
Cara melukis carta geografi dinamik dan interaktif dengan Python Pengenalan: Dalam visualisasi data, carta geografi ialah alat biasa dan berkuasa yang boleh membantu kami memahami dengan lebih baik corak pengedaran spatial dan arah aliran dalam set data. Sebagai bahasa pengaturcaraan tujuan umum, Python mempunyai keupayaan pemprosesan data dan visualisasi yang berkuasa, dan juga boleh digunakan untuk melukis carta geografi yang dinamik dan interaktif. Artikel ini akan memperkenalkan cara menggunakan Python untuk melukis carta geografi dinamik dan interaktif, dan memberikan contoh kod khusus. 1. Persediaan untuk menggunakan Pytho
