캔버스가 github404 역학을 구현하는 방법
이번에는 캔버스로 github404 다이나믹스를 구현하는 방법과, 캔버스를 사용하여 github404 다이나믹스를 구현할 때 주의사항은 무엇인지 알아보겠습니다. 다음은 실제 사례입니다.
며칠 전 github404의 비슷한 인터페이스에 경의를 표하기 위해 CSS 스타일과 JS를 사용했습니다. 동시에 최근에는 장난칠 생각으로 이전 JS를 사용하게 되었습니다. github404의 동적 효과를 완성하기 위해 캔버스를 사용하는 알고리즘입니다.
파일 리소스
파일 소스 코드와 이미지는 글 마지막에 있습니다
code
웹 페이지의 본문 부분
여기서 캔버스의 너비와 높이를 정의하고 블록으로 설정합니다. -레벨 요소. 이러한 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 part
1. 여기서는 모든 매개변수와 메소드를 캡슐화하기 위해 github404라는 새 json 객체를 생성했습니다. imgData 객체를 생성하고 ps:top에 img Pass에 필요한 모든 매개변수를 추가합니다. 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>Summary
이번에는 캔버스를 사용하여 역동적인 효과를 완성했는데, 캔버스의 사용법에 대해 더 많이 이해하게 되었습니다. 동시에 json 객체를 사용하여 데이터와 메서드를 캡슐화하는 방법과 코드를 구성하는 방법에 대해 더 깊이 이해하게 되었습니다.
이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 자료:
HTML5의 드롭다운 상자가 사용자 경험을 높이는 방법H5 파일 필드 FileReader가 파일을 섹션별로 읽고 서버에 업로드하는 방법
방법 동일한 인터페이스에서 H5의 WebGL을 사용하여 json 및 echarts 차트 만들기
위 내용은 캔버스가 github404 역학을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7519
15
1378
52
81
11
54
19
21
68
VirtualBox 고정 디스크를 동적 디스크로 또는 그 반대로 변환
Mar 25, 2024 am 09:36 AM
가상 머신을 생성할 때 디스크 유형을 선택하라는 메시지가 표시되며 고정 디스크 또는 동적 디스크를 선택할 수 있습니다. 고정 디스크를 선택했지만 나중에 동적 디스크가 필요하다는 사실을 깨닫게 된다면 어떻게 될까요? 아니면 그 반대의 경우도 가능합니다. 이번 포스팅에서는 VirtualBox 고정 디스크를 동적 디스크로 또는 그 반대로 변환하는 방법을 살펴보겠습니다. 동적 디스크는 처음에는 크기가 작다가 가상 머신에 데이터를 저장함에 따라 크기가 커지는 가상 하드 디스크입니다. 동적 디스크는 필요한 만큼만 호스트 저장 공간을 차지하므로 저장 공간을 절약하는 데 매우 효율적입니다. 그러나 디스크 용량이 늘어나면 컴퓨터 성능이 약간 영향을 받을 수 있습니다. 고정 디스크와 동적 디스크는 일반적으로 가상 머신에서 사용됩니다.
Windows 11에서 동적 디스크를 기본 디스크로 변환하는 방법
Sep 23, 2023 pm 11:33 PM
Windows 11에서 동적 디스크를 기본 디스크로 변환하려면 먼저 백업을 생성해야 합니다. 프로세스에서 해당 디스크의 모든 데이터가 지워지기 때문입니다. Windows 11에서 동적 디스크를 기본 디스크로 변환해야 하는 이유는 무엇입니까? Microsoft에 따르면 동적 디스크는 Windows에서 더 이상 사용되지 않으며 더 이상 사용이 권장되지 않습니다. 또한 Windows Home Edition은 동적 디스크를 지원하지 않으므로 이러한 논리 드라이브에 액세스할 수 없습니다. 더 많은 디스크를 더 큰 볼륨으로 결합하려면 기본 디스크 또는 저장소 공간을 사용하는 것이 좋습니다. 이 기사에서는 Windows 11에서 동적 디스크를 기본 디스크로 변환하는 방법을 설명합니다. Windows 11에서 동적 디스크를 기본 디스크로 변환하는 방법은 무엇입니까? 처음에는
HTML, CSS, jQuery를 사용하여 동적 이미지 캐러셀을 만드는 방법
Oct 25, 2023 am 10:09 AM
HTML, CSS 및 jQuery를 사용하여 동적 이미지 캐러셀을 만드는 방법 웹 사이트 디자인 및 개발에서 이미지 캐러셀은 여러 이미지 또는 광고 배너를 표시하는 데 자주 사용되는 기능입니다. HTML, CSS, jQuery의 조합을 통해 웹 사이트에 활력과 매력을 더해 역동적인 이미지 캐러셀 효과를 얻을 수 있습니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 간단한 동적 이미지 캐러셀을 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1단계: HTML 접합 설정
html2canvas에는 어떤 버전이 있나요?
Aug 22, 2023 pm 05:58 PM
html2canvas 버전에는 html2canvas v0.x, html2canvas v1.x 등이 포함됩니다. 자세한 소개: 1. html2canvas v0.x는 html2canvas의 초기 버전입니다. 최신 안정 버전은 v0.5.0-alpha1입니다. 2. html2canvas v1.x는 html2canvas의 새 버전입니다.
uniapp은 캔버스를 사용하여 차트와 애니메이션 효과를 그리는 방법을 구현합니다.
Oct 18, 2023 am 10:42 AM
uniapp에서 캔버스를 사용하여 차트와 애니메이션 효과를 그리는 방법에는 특정 코드 예제가 필요합니다. 1. 소개 모바일 장치의 인기로 인해 점점 더 많은 응용 프로그램이 모바일 단말기에 다양한 차트와 애니메이션 효과를 표시해야 합니다. Vue.js를 기반으로 하는 크로스 플랫폼 개발 프레임워크인 uniapp은 캔버스를 사용하여 차트와 애니메이션 효과를 그리는 기능을 제공합니다. 이 기사에서는 uniapp이 캔버스를 사용하여 차트 및 애니메이션 효과를 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 2. 캔버스
캔버스 프레임워크를 배우고 일반적으로 사용되는 캔버스 프레임워크에 대해 자세히 설명합니다.
Jan 17, 2024 am 11:03 AM
Canvas 프레임워크 탐색: 일반적으로 사용되는 Canvas 프레임워크가 무엇인지 이해하려면 특정 코드 예제가 필요합니다. 소개: Canvas는 풍부한 그래픽 및 애니메이션 효과를 얻을 수 있는 HTML5에서 제공되는 그리기 API입니다. 그리기의 효율성과 편의성을 향상시키기 위해 많은 개발자들이 다양한 Canvas 프레임워크를 개발했습니다. 이 기사에서는 일반적으로 사용되는 몇 가지 캔버스 프레임워크를 소개하고 독자가 이러한 프레임워크를 사용하는 방법을 더 깊이 이해하는 데 도움이 되는 특정 코드 예제를 제공합니다. 1. EaselJS 프레임워크 Ea
MyBatis에서 동적 SQL 태그 구문 분석: 태그 선택
Feb 24, 2024 pm 12:15 PM
동적 SQL은 MyBatis 프레임워크의 매우 중요한 기능 중 하나입니다. 이는 유연한 SQL 작업을 달성하기 위해 다양한 조건에 따라 SQL 문을 동적으로 연결하고 처리할 수 있습니다. 그 중 선택 태그는 동적 SQL의 핵심 태그로 주로 조건 선택 로직을 구현하는데 사용된다. 이 기사에서는 MyBatis에서 선택 태그의 사용을 살펴보고 데모용 특정 코드 예제를 제공합니다. 1. 선택 태그의 기본 구문 MyBatis에는 선택 태그의 두 가지 주요 형태가 있습니다:
Python으로 동적 및 대화형 지리 차트를 그리는 방법
Sep 28, 2023 pm 09:37 PM
Python을 사용하여 동적 및 대화형 지리 차트를 그리는 방법 소개: 데이터 시각화에서 지리 차트는 데이터 세트의 공간 분포 패턴과 추세를 더 잘 이해하는 데 도움이 될 수 있는 일반적이고 강력한 도구입니다. 범용 프로그래밍 언어인 Python은 강력한 데이터 처리 및 시각화 기능을 갖추고 있으며 동적 및 대화형 지리 차트를 그리는 데에도 사용할 수 있습니다. 이 기사에서는 Python을 사용하여 동적 및 대화형 지리 차트를 그리는 방법을 소개하고 특정 코드 예제를 제공합니다. 1. Python 사용 준비
