캔버스를 사용하여 Zhihu 로그인 페이지를 구현하는 예제 코드 공유-H5 튜토리얼-php.cn

캔버스를 사용하여 Zhihu 로그인 페이지를 구현하는 예제 코드 공유

零下一度

풀어 주다： 2017-05-09 11:00:53

원래의

2394명이 탐색했습니다.

이 글에서는 Zhihu 로그인 페이지의 배경 효과를 쉽고 빠르게 구현하기 위한 캔버스 관련 지식을 주로 소개하고 있어 참고할 가치가 매우 높습니다. 아래 에디터로 살펴보겠습니다

서문

Zhihu의 로그인 페이지를 열면 배경에 애니메이션이 있는 것을 볼 수 있고, 꽤 멋져 보입니다 멋진 모습:

이 효과는 캔버스를 사용하여 달성하는 것이 어렵지 않습니다. 다음으로 이 효과를 단계별로 설명하고 달성하겠습니다.

분석

작업을 시작하기 전에 효과가 어떻게 나타나는지 분석하세요. 가장 먼저 이해해야 할 점은 모든 선과 원이 움직이는 것처럼 보이지만 실제로는 원만 움직이고 선은 특정 조건을 충족하는 두 원을 연결하는 것에 불과하다는 것입니다. 그러면 원이 어떻게 움직이는지 분석해 보면, 각 원은 일정한 속도로 직선으로 움직이며, 그 이동 방향은 서로 다릅니다. 관련 물리학 지식을 통해 각 원이 수평 방향으로 움직이는 것을 알 수 있습니다. 그리고 수직 방향이 있습니다. 마지막으로 원이 캔버스의 경계 밖으로 이동하면 원은 경계를 나가는 가장자리의 반대쪽에서 다시 캔버스 안으로 들어갑니다. 이 세 가지 핵심 사항을 이해하면 훨씬 더 명확해질 것입니다.

연습

먼저 캔버스를 만듭니다.

// 这里就简单地设置下背景色
<body style="background:#f7fafc;">
 <canvas id="canvas" style="width: 100%; height: 100%;"></canvas>
</body>

로그인 후 복사

그런 다음 캔버스 컨텍스트를 가져오고 몇 가지 공통 속성

을 설정합니다.

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;

context.fillStyle = "rgba(0, 0, 0, 0.08)";
context.strokeStyle = "rgba(0, 0, 0, 0.05)";
context.lineWidth = 0.5;

로그인 후 복사

다음으로 원을 그리고 원을 그리려면 원의 중심 좌표, 반경, 수평 속도, 수직 속도가 필요하며 이 정보는 함수를 통해 특정 조건을 충족해야 합니다. <… 단계는 각 프레임에 원과 선을 그리고 r

end

er 함수를 만든 다음 함수 내의 모든 원을 그리는 것입니다.

// 存放所有圆的数组，这里用balls
var balls = [];
function createBall() {
 // x坐标
 var _x = Math.random() * canvas.width;
 // y坐标
 var _y = Math.random() * canvas.height;
 // 半径 [0.01, 15.01]
 var _r = Math.random() * 15 + 0.01;
 // 水平速度 [±0.0, ±0.5]
 var _vx = Math.random() * 0.5 * Math.pow( -1, Math.floor(Math.random() * 2 + 1) );
 // 垂直速度 [±0.0, ±0.5]
 var _vy = Math.random() * 0.5 * Math.pow( -1, Math.floor(Math.random() * 2 + 1) );
 // 把每一个圆的信息存放到数组中
 balls.push({
 x: _x,
 y: _y,
 r: _r,
 vx: _vx,
 vy: _vy
 });
}

로그인 후 복사

그런 다음 두 프레임마다 순회해야 합니다. 원의 중심 사이의 거리가 특정 임계값(예: 500)보다 작습니다. 이 값이 만족되면 두 원의 중심을 연결합니다.

// 圆的数量
var num = 20;
for(var i = 0; i < num; i++) {
 createBall();
}

로그인 후 복사

여기서 거리 함수는 거리를 계산하는 것입니다. 두 점 사이:

for(var k = 0; k < num; k++) {
 context.save();
 context.beginPath();
 context.arc( balls[k].x, balls[k].y, balls[k].r, 0, Math.PI*2 );
 context.fill();
 context.restore();
}

로그인 후 복사

다른 단계는 원이 경계 값을 초과하는지 확인하는 것입니다. 조건이 충족되면 반대쪽에서 다시 들어옵니다.

for(var i = 0; i < num; i++) {
 for(var j = i + 1; j < num; j++) {
 if( distance( balls[i], balls[j] ) < 500 ) {
  context.beginPath();
  context.moveTo( balls[i].x, balls[i].y );
  context.lineTo( balls[j].x, balls[j].y );
  context.stroke();
 }
 }
}

로그인 후 복사

물론이죠. 간단하게 만들고 싶다면 원을 제거하고 경계값을 초과하자마자 다시 시작하면 됩니다. 원을 생성하면 됩니다:

function distance(point1, point2) {
 return Math.sqrt( Math.pow( (point1.x - point2.x), 2 ) + Math.pow( (point1.y - point2.y), 2 ) );
}

로그인 후 복사

이렇게 하면 각 프레임의 세부 사항이 완성됩니다. 단계는 원을 움직이는 것입니다:

for(var k = 0; k < num; k++) {
 balls[k].x += balls[k].vx;
 balls[k].y += balls[k].vy;

 if( balls[k].x - balls[k].r > canvas.width ) {
 balls[k].x = 0 - balls[k].r;
 }
 if( balls[k].x + balls[k].r < 0 ) {
 balls[k].x = canvas.width + balls[k].r;
 }
 if( balls[k].y - balls[k].r > canvas.height ) {
 balls[k].y = 0 - balls[k].r;
 }
 if( balls[k].y + balls[k].r < 0 ) {
 balls[k].y = canvas.height + balls[k].r;
 }
}

로그인 후 복사

이 시점에서 전체 효과가 드러납니다. 물론, 효과를 더욱 섬세하고 다채롭게 만들기 위해 스스로 알아낼 수 있는 세부 사항도 많이 있습니다. 초보자에게 도움이 되길 바랍니다.

[관련 추천]

무료 h5 온라인 동영상 튜토리얼

2.HTML5 정식 버전 매뉴얼

3. php.cn 원본 html5 동영상 튜토리얼

위 내용은 캔버스를 사용하여 Zhihu 로그인 페이지를 구현하는 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!