How canvas implements github404 dynamics
This time I will show you how to implement github404 dynamics with canvas. What are the precautions for using canvas to implement github404 dynamics? Here are practical cases, let’s take a look.
A few days ago, I used css style and js to pay tribute to the similar interface of github404. At the same time, I recently came into contact with canvas. With the idea of messing around, I used the previous js algorithm to complete it using canvas. Dynamic effects of github404.
File resources
File source code and PicturesThe
code is given at the end of the article
The body part of the webpage
Here, define the width and height of canvas and set it as a block-level element. These img tags load these images, so we don’t need to load them in js, and then set the images not to be displayed 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 part
1. Here I still created a new json object named github404 to encapsulate all parameters and methods
2. Create an imgData object again, and pass all the parameters required for img into ps:top and left for positioning in the drawImage() method. The scale parameter is used to calculate the corresponding picture movement when the mouse moves
3. The init() method is used for initialization and is the interface with the outside
4. The implementation of the drawing method is to use the for in loop to traverse imgData[], then assign values in sequence, and finally use the drawImage() method to draw, just In the mobile drawing method, you need to pay attention to using the ctx.clearRect() method to clear the canvas first.
<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>Summary
This time I used canvas to complete this dynamic effect, which made me understand more about the usage of canvas. At the same time, it gave me a deeper understanding of how to use json objects to encapsulate data and methods, and how to organize code.
I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
How the HTML5 drop-down box should increase the user experienceHow to segment the H5 file domain FileReader Read the file and upload it to the serverHow to use H5's WebGL to make json and echarts charts in the same interfaceThe above is the detailed content of How canvas implements github404 dynamics. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Convert VirtualBox fixed disk to dynamic disk and vice versa
Mar 25, 2024 am 09:36 AM
When creating a virtual machine, you will be asked to select a disk type, you can select fixed disk or dynamic disk. What if you choose fixed disks and later realize you need dynamic disks, or vice versa? Good! You can convert one to the other. In this post, we will see how to convert VirtualBox fixed disk to dynamic disk and vice versa. A dynamic disk is a virtual hard disk that initially has a small size and grows in size as you store data in the virtual machine. Dynamic disks are very efficient at saving storage space because they only take up as much host storage space as needed. However, as disk capacity expands, your computer's performance may be slightly affected. Fixed disks and dynamic disks are commonly used in virtual machines
How to convert dynamic disk to basic disk on Windows 11
Sep 23, 2023 pm 11:33 PM
If you want to convert a dynamic disk to a basic disk in Windows 11, you should create a backup first as the process will erase all data in it. Why should you convert dynamic disk to basic disk in Windows 11? According to Microsoft, dynamic disks have been deprecated from Windows and their use is no longer recommended. Additionally, Windows Home Edition does not support dynamic disks, so you will not be able to access these logical drives. If you want to combine more disks into a larger volume, it is recommended to use Basic Disks or Storage Spaces. In this article, we will show you how to convert dynamic disk to basic disk on Windows 11 How to convert dynamic disk to basic disk in Windows 11? In the beginning
How to create a dynamic image carousel using HTML, CSS and jQuery
Oct 25, 2023 am 10:09 AM
How to use HTML, CSS and jQuery to create a dynamic image carousel. In website design and development, image carousel is a frequently used function for displaying multiple images or advertising banners. Through the combination of HTML, CSS and jQuery, we can achieve a dynamic image carousel effect, adding vitality and appeal to the website. This article will introduce how to use HTML, CSS and jQuery to create a simple dynamic image carousel, and provide specific code examples. Step 1: Set up HTML junction
Learn the canvas framework and explain the commonly used canvas framework in detail
Jan 17, 2024 am 11:03 AM
Explore the Canvas framework: To understand what are the commonly used Canvas frameworks, specific code examples are required. Introduction: Canvas is a drawing API provided in HTML5, through which we can achieve rich graphics and animation effects. In order to improve the efficiency and convenience of drawing, many developers have developed different Canvas frameworks. This article will introduce some commonly used Canvas frameworks and provide specific code examples to help readers gain a deeper understanding of how to use these frameworks. 1. EaselJS framework Ea
uniapp implements how to use canvas to draw charts and animation effects
Oct 18, 2023 am 10:42 AM
How to use canvas to draw charts and animation effects in uniapp requires specific code examples 1. Introduction With the popularity of mobile devices, more and more applications need to display various charts and animation effects on the mobile terminal. As a cross-platform development framework based on Vue.js, uniapp provides the ability to use canvas to draw charts and animation effects. This article will introduce how uniapp uses canvas to achieve chart and animation effects, and give specific code examples. 2. canvas
What versions of html2canvas are there?
Aug 22, 2023 pm 05:58 PM
The versions of html2canvas include html2canvas v0.x, html2canvas v1.x, etc. Detailed introduction: 1. html2canvas v0.x, which is an early version of html2canvas. The latest stable version is v0.5.0-alpha1. It is a mature version that has been widely used and verified in many projects; 2. html2canvas v1.x, this is a new version of html2canvas.
Parse dynamic SQL tags in MyBatis: select tag
Feb 24, 2024 pm 12:15 PM
Dynamic SQL is one of the very important functions in the MyBatis framework. It can dynamically splice and process SQL statements according to different conditions to achieve flexible SQL operations. Among them, the selection tag is a key tag in dynamic SQL, which is mainly used to implement conditional selection logic. This article will explore the use of selection tags in MyBatis and provide specific code examples for demonstration. 1. Basic syntax of selection tags There are two main forms of selection tags in MyBatis:
How to draw dynamic and interactive geographic charts with Python
Sep 28, 2023 pm 09:37 PM
How to draw dynamic and interactive geographic charts with Python Introduction: In data visualization, geographic charts are a common and powerful tool that can help us better understand spatial distribution patterns and trends in data sets. As a general-purpose programming language, Python has powerful data processing and visualization capabilities, and can also be used to draw dynamic and interactive geographical charts. This article will introduce how to use Python to draw dynamic and interactive geographical charts, and provide specific code examples. 1. Preparation for using Pytho
