며칠 전 github404의 유사한 인터페이스에 경의를 표하기 위해 CSS 스타일과 js를 사용했습니다. 동시에 최근에는 장난을 치는 아이디어로 이전 js 알고리즘을 사용했습니다. 캔버스를 사용하여 github404의 동적 효과를 완성하세요.
렌더링
파일 디렉토리 파일 리소스파일 소스 코드와 사진은 기사 마지막 부분에 나와 있습니다.
암호웹페이지의 본문 부분
여기에서는 캔버스의 너비와 높이를 정의하고 블록 수준 요소로 설정합니다. 이러한 img 태그는 이러한 이미지를 로드하므로 js에서 해당 이미지를 로드한 다음 이미지가 디스플레이:없음을 표시하지 않도록 설정할 필요가 없습니다.
<body> <canvas id=mycanvas width=1680 height=630 style=margin:0;display:block> 브라우저가 캔버스를 지원하지 않습니다 </canvas> <img src=./images/field.png style=display: none > <img src=./images/text.png 스타일=표시:없음> <img src=./images/cat.png 스타일=표시:없음> <img src=./images/cat_shadow.png 스타일=표시:없음> <img src=./images/speeder.png 스타일=표시:없음> <img src=./images/speeder_shadow. png 스타일=표시:없음> <img src=./images/buliding_1.png 스타일=표시:없음> <img src=./images/building_2.png style=display:none> </body>js 부분
1. 여기서는 모든 매개변수와 메소드를 캡슐화하기 위해 github404라는 새로운 json 객체를 생성했습니다.
2. imgData 객체를 다시 생성하고 img에 필요한 모든 매개변수를 ps:top에 전달하고 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',//해당 이미지 경로 크기: 0.06,//마우스가 움직일 때 해당 이미지의 이동 비율}, Building_2: { 위쪽: 133, 왼쪽: 1182, src: './images/building_2.png', 스케일: 0.05, }, Building_1: { 상단: 79, 왼쪽: 884, src: './images/building_1.png', 스케일: 0.03, }, speeder_shadow : { 위쪽: 261, 왼쪽: 776, 소스: './images/speeder_shadow.png', 스케일: 0.01, }, cat_shadow: { 상단: 288, 왼쪽: 667, src: './images/cat_shadow.png', 스케일: 0.02, }, speeder: { 상단: 146, 왼쪽: 777, src: './images/speeder.png', 배율: 0.01, }, 고양이: { 위쪽: 88, 왼쪽: 656, src: './images/cat.png', 크기: 0.05, }, 텍스트: { 위쪽: 70, 왼쪽: 364, src: './images/text ' .png', 스케일: 0.03, }, }, rate_w: 0, rate_h: 0,//오프셋 비율 field_width: 1680, field_height: 370,//배경 높이 및 너비 canvas: document.querySelector('#mycanvas'),//캔버스 요소 가져오기 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');//브러시 가져오기(키 입력) this.imgData){//imageData 객체 탐색 var image = new Image(); var left = this.imgData[key].left; [ key].src; ctx.drawImage(image,left,top, image.width,image.height) } }, attachmentMouseEvent: 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); this.imgData) { var image = new Image(); var Offer_w = this.rate_w * pageX * this.imgData[key].scale; varoffer_h = this.rate_h * pageY * this.imgData[key].scale; /왼쪽과 위쪽을 정의하고 아래에 그릴 때 매개변수 위치를 지정합니다. 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> 요약이번에는 캔버스를 사용하여 이러한 역동적인 효과를 완성했는데, 이를 통해 캔버스의 사용법에 대해 더 잘 이해할 수 있었습니다. 나를 동시에 만들어줘
저는 json 개체를 사용하여 데이터와 메서드를 캡슐화하고 코드를 구성하는 방법에 대해 더 깊이 이해하고 있습니다.
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.