인기 있는 동적 배경 연결 효과. 아래 코드는 추출된 코드에 대해 작성자가 정리하고 코멘트를 달았는데, 참고 학습에 매우 적합합니다.
효과 스크린샷:
효과 데모: https://jc1144096387.github.io/canvas_nest/
작성자 주소: https://blog.csdn.net/u013556477/article/details/82819785
HTML 코드(테스트 코드):
<!doctype html><html lang=en> <head> <meta charset=UTF-8> <meta name=Generator content=EditPlus®> <meta name=Author content=> <meta name=키워드 콘텐츠=> <meta name=Description content=> <title>캔버스 장면 연결 효과</title> <style type=text/css>*{ margin: 0px; } body{ 배경색: #f4f4f4; }</style></head><body> <!-- <canvas id=c_n9 width=1366 height=403 style=position: top: 0px; ; z-색인: -1; 불투명도: 0.5;></canvas> --> <script type=text/javascript src=test-clear.js 불투명도=0 .6></script></body></html>자바스크립트 코드:
//즉시 함수 실행 //!은 함수 선언이 아닌 함수 표현식임을 JavaScript 엔진에 알리는 데 사용됩니다. , +, - 및 기타 연산자가 이 효과를 얻을 수 있지만 ()가 가장 안전합니다. // !function(){} 뒤에 ()를 추가하면 함수가 즉시 호출됩니다. // 이는 비공개 범위를 시뮬레이션할 수 있습니다. 이런 식으로 html file은 여러 js 파일을 참조할 때 변수 충돌을 일으키지 않습니다! function() { //Canvas 요소 관련 // 캔버스 요소를 생성하고 캔버스 요소의 ID를 설정합니다. var canvas = document.createElement(canvas), context = canvas .getContext (2d), 속성 = getAttr(); //생성된 캔버스의 관련 속성을 설정합니다. canvas.id = c_n + attr.length.cssText = position:fixed;top:0;left:0;z-index: + attr.z + ;opacity: + attr.opacity; //바디 요소에 캔버스 요소 추가 document.getElementsByTagName(body)[0].appendChild(canvas); //이 함수는 캔버스 요소의 너비 속성과 높이 속성을 설정합니다. getWindowWH(); //창이나 프레임의 크기가 조정되면 onresize 이벤트가 발생합니다. //창 크기가 변경되면 창의 너비와 높이가 변경됩니다. 그리고 캔버스 요소의 너비와 높이를 설정합니다. window.onresize = getWindowWH; //이 함수는 이 파일을 참조하는 스크립트 요소를 가져옵니다. //이 파일에서 할당 시 getScript 함수가 한 번 실행되기 때문에 html 파일이 이 파일을 참조할 때 이 파일 뒤의 스크립트 태그는 브라우저에서 해석되지 않습니다. //그래서 얻은 스크립트 배열에서 이 기사를 참조하는 스크립트 요소는 배열의 끝에 있습니다. //이 기능의 목적은 개발자가 파일을 HTML에 도입하는 스크립트 요소의 속성을 직접 수정할 수 있도록 하는 것입니다. 캔버스의 일부 속성, 캔버스의 z-index, 투명도 및 작은 사각형의 수, 색상을 수정합니다. // 개발자가 body 요소에 캔버스 요소를 추가하기 위해 이전 코드와 협력합니다. 이 특수 효과를 배경으로 사용하려면 HTML 파일에 스크립트 요소만 추가하고 이 파일을 인용하면 됩니다. function getAttr() { let scripts = document.getElementsByTagName(script), len = scripts.length, script = scripts[len - 1]; //v는 이 문서의 스크립트 요소를 참조하는 마지막 스크립트 요소입니다. return { length: len, z: script. getAttribute (zIndex) || -1, 불투명도: script.getAttribute(opacity) || 색상: script.getAttribute(color) || script.getAttribute(count) || 99 } } //창 너비와 높이를 가져오고 캔버스 요소 너비와 높이를 설정합니다. function getWindowWH() { W = canvas.width = window.innerWidth || | document.body .clientWidth, H = canvas.height = window.innerHeight || document.documentElement.clientHeight || //임의의 위치에 작은 정사각형 생성 var random = Math.random, squares = []; //작은 정사각형 저장//squares[] 배열에 작은 정사각형 넣기 for (let p = 0; p < attr.count; p++ ) { var square_x = random() * W, //횡좌표 square_y = 무작위() * H, //좌표 square_xa = 2 * random() - 1, //x축 변위-1,1 square_ya = 2 * 무작위 () - 1; //Y축 변위 squares.push({ x: square_x, y: square_y, xa: square_xa, ya: square_ya, max: 6000 }) } //작은 마우스 사각형 생성 var mouse = { x: null, y: null, max: 20000 }; //마우스 좌표를 가져옵니다. window.onmousemove = function(i) { //i는 W3C DOM, window.event입니다. IE DOM의 경우 IE와의 호환성을 확보하기 위해 //그러나 IE는 현재 W3C DOM을 지원하는 것 같습니다. IE11을 사용하고 있으며 다음 코드 줄을 주석 처리하여 마우스 상호 작용 효과를 얻을 수도 있다고 //합니다. 7/8/9는 지원되지 않습니다. //물론 i = i || mouse.x = i.clientX = i.clientY; ; } //마우스가 창 밖으로 이동한 후 마우스를 제거합니다. 작은 사각형 window.onmouseout = function() { mouse.x = null; mouse.y = null } //작은 사각형을 그리면 작은 사각형이 이동하고(경계를 터치하면 역방향 이동) 작은 사각형이 마우스에 의해 구속됩니다. .requestAnimationFrame || 창 .webkitRequestAnimationFrame || window.oRequestAnimationFrame || function(i) { window.setTimeout 45) }; //브라우저마다 지원하는 requestAnimationFrame이 다르며, 각 브라우저 함수와 호환됩니다. draw() { //캔버스 컨텍스트를 지웁니다.clearRect(0, 0, W, H); ].concat (squares); //마우스 작은 정사각형 배열과 다른 작은 정사각형 배열을 연결(병합)합니다. var x, v, A, B, z, y; //square 속성 테이블: x, y, xa, ya, 최대 squares.forEach(function(i) { //작은 정사각형의 방향 이동 구현 ix += i.xa; iy += i.ya; //작은 정사각형의 이동 방향 제어//작은 정사각형이 창에 도달할 때 경계, 반대 방향으로 이동 i.xa = i.xa * (ix > W || ix < 0 ? -1 : 1) i.ya = i.ya * (iy > H || iy < 0 ? - 1:1); //fillRect의 처음 두 매개변수는 직사각형 왼쪽 상단의 x, y 좌표이고, 마지막 두 매개변수는 각각 너비와 높이입니다. //작은 정사각형을 그립니다. context.fillRect(ix - 0.5, iy - 0.5 , 1, 1); //w의 모든 요소를 탐색합니다. for (let n = 0; n < w.length; n++) { x = w[n]; //x와 i가 동일한 객체 인스턴스가 아니고 x의 xy 좌표가 존재하는 경우 (i !== x && null !== xx && null !== xy) { x_diff = ix - xx; //i와 x의 x 좌표 차이 y_diff = iy - xy; //i의 y 좌표와 x 거리의 차이 = x_diff * x_diff + y_diff * y_diff; //사변 제곱 if (distance < x.max) { //작은 사각형 i를 마우스의 작은 사각형에 묶도록 만듭니다. 즉, 작은 사각형 i와 마우스의 작은 사각형 사이의 거리가 너무 크면 작은 사각형 i가 작은 사각형에 묶이게 됩니다. //마우스를 중심으로 여러 개의 작은 사각형이 생성됩니다. mouse.max /2는 원을 만드는 반경입니다. if (x === mouse && distance > x.max / 2) { ix = ix - 0.03 * x_diff; iy = iy - 0.03 * y_diff } A = (x.max - distance) / x.max; context.beginPath(); //두 개의 작은 사각형 사이의 거리에 따라 브러시 선의 두께를 설정합니다. 범위는 0~0.5입니다. 선이 얇아지면 max에 도달 선을 그리면 선이 사라짐 context.lineWidth = A / 2; //브러시의 선 색상을 캔버스 색상인 sc로 설정하고 투명도를 (A+0.2)로 설정합니다. 즉, 두 개의 작은 사각형이 멀리 떨어져 있을수록 선이 더 밝아집니다. attr.color + , + (A + 0.2) + ); //브러쉬 획을 i개의 작은 정사각형으로 설정 context.moveTo(ix, iy) //브러시 획을 x개의 작은 정사각형으로 이동 context.lineTo(xx , xy); //선 그리기, 즉 작은 사각형을 연결하는 선 그리기를 완료합니다. context.Stroke() } } } //w 배열에서 작은 사각형 i 제거 //두 개의 작은 사각형이 반복적으로 연결되는 것을 방지 w.splice(w.indexOf(i), 1) }) //window.requestAnimationFrame은 재귀 호출을 형성하는 setTimeout과 유사합니다. , //그러나 window.requestAnimationFrame은 시스템 시간 간격을 사용하여 최고의 그리기 효율성을 유지하고 더 나은 최적화를 제공하여 애니메이션을 더 부드럽게 만듭니다.//브라우저 최적화 후 애니메이션이 더 매끄러워집니다. //창이 활성화되지 않으면 컴퓨팅 리소스를 절약하기 위해 애니메이션이 중지됩니다. animation(draw); } //여기에서 0.1초 동안 기다린 후 draw()를 한 번 실행합니다. 실제 애니메이션 효과는 window에서 구현됩니다. .requestAnimationFrame function() { draw() }, 100)} ();소스코드 주소: https://github.com/jc1144096387/canvas_nest
요약위는 편집기에서 소개한 배경 마우스 연결 동적 효과를 얻기 위해 html5 캔버스를 구문 분석하는 코드입니다. 질문이 있는 경우 메시지를 남겨주시면 편집자가 제 시간에 답변해 드리겠습니다. . 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!
이 글이 도움이 되셨다면 재인쇄하셔도 좋고, 출처를 밝혀주시면 감사하겠습니다!