집

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을 사용하여 입자 효과 텍스트 애니메이션 특수 효과를 얻는 방법에 관한 것입니다. 이는 특정 참조 가치가 있으므로 도움이 필요할 수 있습니다.