집

JS 특수 효과

HTML5 특수 효과

HTML5+Canvas의 블랙홀 특수 효과

지금 다운로드 시사

<!doctype html>
<html>
<머리>
<meta charset="utf-8">
<title>不要失去你的彩虹</title>

<스타일>
캔버스 {
위치: 절대;
상단: 0;
왼쪽: 0;
}
</스타일>

</머리>
<몸>

<캔버스 id=c></canvas>

<스크립트>
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;

const ctx = c.getContext('2d');
const 선택 = {
16진수 길이: 30,
lenFn: ({ len, t }) =>
len + Math.sin(t),
radFn: ({ rad, len, t, 흥분 }) =>
rad + (흥분 + opts.propFn({ len, t }))*2 / 4,
propFn: ({ len, t }) =>
len / opts.hexLength / 10 - t,
흥분Fn: ({ len, t }) =>
Math.sin(opts.propFn({ len, t }))**2,
colorFn: ({ rad, 흥분, t }) =>
`hsl(${rad / Math.TAU * 360 + t}, ${흥분 * 100}%, ${20 + 흥분 * 50}%)`,
시간 단계: .01,
랜덤지그: 8,

repaintColor: 'rgba(0,0,0,.1)'
};
틱 = 0;

수학.TAU = 6.28318530717958647692;

const 정점 = [];
클래스 정점 {
생성자({ x, y }) {
this.len = Math.sqrt(x*x + y*y);
this.rad = Math.acos(x / this.len) * (y > 0 ? 1 : -1) + .13;
this.prevPoint = { x, y };
}

단계() {
const 흥분 = opts.excitementFn({ len: this.len, t: 진드기 });
const 매개변수 = {
렌: this.len,
rad: this.rad,
t: 틱,
설렘
};
const nextLen = opts.lenFn(param);
const nextRad = opts.radFn(param);
const 색상 = opts.colorFn(param);

ctx.StrokeStyle = 색상;
ctx.lineWidth = 흥분 + .2;
ctx.beginPath();
ctx.moveTo(this.prevPoint.x, this.prevPoint.y);
this.prevPoint.x = nextLen * Math.cos(nextRad) +
Math.random() * (1-흥분)**2 * opts.randomJig * 2 - opts.randomJig;
this.prevPoint.y = nextLen * Math.sin(nextRad) +
Math.random() * (1-흥분)**2 * opts.randomJig * 2 - opts.randomJig;
ctx.lineTo(this.prevPoint.x, this.prevPoint.y);
ctx.스트로크();
}

정적 생성() {
정점.길이 = 0;
const hexCos = Math.cos(Math.TAU / 12) * opts.hexLength;
const hexSin = Math.sin(Math.TAU / 12) * opts.hexLength;


alternanceX = false로 설정;
for(let x = 0; x < w; x += hexCos) {
Alternance = alternanceX = !alternanceX;
for(let y = 0; y < h; y += hexSin + opts.hexLength) {
대체 = !alternance;
vertices.push(새 정점({
x: x - w / 2,
y: y + 교대 * hexSin - h / 2
}))
}
}

}
}

Vertex.gen();

ctx.fillStyle = '#222';
ctx.fillRect(0, 0, w, h);
const 애니메이션 = () => {
window.requestAnimationFrame(anim);

틱 += opts.timeStep;

ctx.fillStyle = opts.repaintColor;
ctx.fillRect(0, 0, w, h);

ctx.translate(w/2, h/2);
vertices.forEach((vertex) => vertex.step());
ctx.translate(-w/2, -h/2);
}
애니메이션();

window.addEventListener('resize', () => {
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;

Vertex.gen();
틱 = 0;
ctx.fillStyle = '#222';
ctx.fillRect(0, 0, w, h);
})

</본문>

</html>

这是一个HTML5+Canvas의 黑洞特效, 需要的朋友可以直接下载使사용, 更多特效代码尽에서PHP中文网。

부인 성명

이 사이트의 모든 리소스는 네티즌이 제공하거나 주요 다운로드 사이트에서 재인쇄되었습니다. 소프트웨어의 무결성을 직접 확인하십시오! 이 사이트의 모든 리소스는 학습 참고용으로만 사용됩니다. 상업적 목적으로 사용하지 마시기 바랍니다. 그렇지 않으면 모든 결과에 대한 책임은 귀하에게 있습니다! 침해가 있는 경우 당사에 연락하여 삭제하시기 바랍니다. 연락처: admin@php.cn

관련 기사

应用程序源代码：
CSS部分：

순수 JavaScript_javascript 기술을 사용하여 HTML5 Canvas에서 6가지 특수 효과 필터를 구현한 예

16 May 2016

6개의 간단하고 일반적인 HTML5 Canvas 특수 효과 필터가 구현되어 순수 JavaScript 호출 가능 API 파일 gloomyfishfilter.js에 캡슐화되었습니다. 프로그램 소스 코드는 다음과 같습니다.

HTML5 CSS3 진행률 표시줄 카운트다운 애니메이션 특수 효과 코드 [권장]_html5 튜토리얼 기술

16 May 2016

아래 편집기는 HTML5 CSS3 진행률 표시줄 카운트다운 애니메이션 특수 효과 코드[권장]를 공유합니다. 모두에게 도움이 되기를 바랍니다. 편집자를 따라가서 살펴보겠습니다.

입자 효과 텍스트 애니메이션 특수 효과를 얻기 위해 HTML5+css3을 사용하는 방법(전체 코드 첨부)

25 Sep 2018

웹 페이지를 탐색해 보면 오늘날의 웹 페이지가 점점 더 아름다워지고 있으며, 많은 애니메이션 특수 효과가 점점 더 멋있어지고 있다는 것을 알 수 있습니다. 이는 HTML5 및 CSS3의 심층적인 개발과 불가분의 관계입니다. 오늘은 HTML5와 CSS3 기반의 텍스트 효과인 파티클 효과 텍스트 애니메이션 효과를 공유해보겠습니다. 이 기사의 내용은 HTML5+css3을 사용하여 입자 효과 텍스트 애니메이션 특수 효과를 얻는 방법에 관한 것입니다. 이는 특정 참조 가치가 있으므로 도움이 필요할 수 있습니다.

HTML5 Canvas 모바일 행운권 추첨 특수 효과

18 Jan 2017

jquery와 HTML5 Canvas를 기반으로 한 행운권 추첨 특수 효과입니다. 행운의 상품 특수 효과는 모바일 단말기를 지원합니다. Canvas 요소를 동적으로 구성하여 대상 디스크를 생성하고 jquery 코드를 통해 무작위로 상품을 획득합니다.

HTML5 전자잡지 플립북 특수 효과 코드 공유

28 Apr 2017

HTML5 전자 잡지 플립북 애니메이션 특수 효과를 사용하여 본인 또는 다른 사람의 사진을 담은 사진 앨범을 만드세요.

HTML5 Canvas 기반의 텍스트 애니메이션 특수 효과

02 Apr 2018

이 글은 HTML5 Canvas를 기반으로 한 텍스트 애니메이션 특수 효과를 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

html5 canvas_html5 튜토리얼 기술로 구현된 그림 유리 조각 특수 효과

16 May 2016

HTML5 캔버스는 그림 유리 조각의 특수 효과를 구현합니다. 그림은 유리 조각 형태로 인터페이스에 나타나며 깨진 유리의 효과는 매우 좋습니다.

HTML5 캔버스를 기반으로 한 사실적인 불꽃놀이 특수 효과 플러그인

18 Jan 2017

jquery-fireworks는 HTML5 Canvas를 기반으로 하는 사실적인 불꽃놀이 특수 효과를 위한 jQuery 플러그인입니다. 플러그인은 사용하기 쉽고 자유롭게 구성할 수 있습니다. div 컨테이너에서 사실적인 불꽃놀이 효과를 생성할 수 있습니다.

웹 개발에 일반적으로 사용되는 5가지 HTML5 특수 효과 다운로드

20 Jun 2017

HTML5는 이제 WEB 개발에서 인기 있는 트렌드가 되었습니다. HTML5에는 오랫동안 기다려온 많은 새로운 기능이 있습니다. 요즘에는 많은 웹 개발자들이 Flash 대신 HTML5를 사용하여 다양한 리치 웹 애플리케이션을 만들기 시작하고 있습니다. PHP 중국어 웹사이트에서는 웹 개발에 일반적으로 사용되는 5가지 HTML5 특수 효과를 권장합니다.

See all articles