집

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

관련 기사

지능형 인간화 제출 양식 JS 특수 효과 코드

25 Jul 2016

지능형 인간화 제출 양식 JS 특수 효과 코드

웹페이지 일부 표시 및 숨기기 페이지 특수 효과 확장 및 축소

25 Jul 2016

웹페이지 일부 표시 및 숨기기 페이지 특수 효과 확장 및 축소

iframe 사용 PHP는 iframe을 사용하여 새로 고침 없이 파일을 업로드하는 코드를 구현합니다.

29 Jul 2016

iframe 사용법: iframe 사용법 php는 iframe을 사용하여 새로 고침 없이 파일을 업로드하는 코드를 구현합니다. 다음과 같이 코드를 복사합니다: <html> 　　head> 　<title>새로 고침 없이 파일 업로드 </title> 　　<meta Content-type="text/html " charset="utf-8" /> 　<script type="text/webpage 특수 효과"> 　function startUpload() { 　docu

PHP 배열 PHP 배열 기사에 키워드 링크 추가 기사 콘텐츠에 자동으로 링크 추가

29 Jul 2016

PHP 배열: PHP 배열 PHP 배열은 기사에 키워드를 추가하여 기사 내용에 대한 링크를 자동으로 추가합니다. 다음과 같이 코드를 복사합니다. <?php $keys =array( array('웹 페이지 특수 효과','/js_a/js. html'), 배열('seo','/seo/seo.html'), 배열('php','/phper/php.html'), 배열('jsp','/jsp/jsp.html' ), array(' asp','/asp/asp.html'), array('ps','/f

Douyin의 AI 도구는 무엇입니까?

29 Nov 2024

Douyin은 지능형 편집, 비디오 특수 효과, 자막 생성, 표지 생성 및 기타 보조 콘텐츠 생성을 포함하여 제작자가 콘텐츠를 쉽게 생성, 편집 및 홍보할 수 있도록 돕는 다양한 자체 AI 도구를 제공합니다. 지능형 추천, 콘텐츠 검토 및 제작 지원 도구는 콘텐츠 품질과 배포 효율성을 향상시킵니다. 음성 체인저 등이 콘텐츠에 흥미를 더해줍니다.

PHP jquery 폭포 흐름 LightBox 그림 상자 특수 효과

13 Mar 2017

: PHP jquery 폭포 흐름 LightBox 그림 상자 특수 효과: 요즘 웹사이트 작업을 하다보니 많은 사진을 포맷해야 해서 폭포 흐름을 생각했는데 폭포 흐름이 구현됐는데 큰 그림을 봐야 해서.. 폭포 흐름과 LightBox 사진이 잘 통합되어 있습니다. 라이트박스를 사용하여 현재 페이지의 폭포 흐름에서 축소판을 확대할 수 있습니다. 공식 웹사이트: http://www.codesc.net 데모 주소: http://www.codesc.net/other/waterwall_lightbox/index.php

애니메이션 AI 특수 효과 도구란 무엇입니까?

28 Nov 2024

애니메이션 AI 특수 효과 도구는 애니메이터에게 창의력을 강화하고 매력적인 애니메이션을 제작할 수 있는 강력한 기술을 제공하기 위해 탄생했습니다. 이러한 도구에는 다음이 포함됩니다: 1. DeepMotion(캐릭터 애니메이션), 2. AutoTrace(벡터 애니메이션 변환), 3. Adobe Character Animator(실시간 캐릭터 애니메이션), 4. TensorFlow.js(대화형 애니메이션), 실제와 같은 애니메이션) 애니메이션) 6. DeepDreamGenerator(추상 애니메이션) 7. RunwayML(사용하기 쉬운 AI 애니메이션 도구)

튜토리얼 자율 학습 편집

10 Dec 2024

편집 튜토리얼을 스스로 가르치는 것은 어렵지 않습니다. 다음 단계를 따르십시오. 올바른 편집 소프트웨어(예: Shotcut 또는 Adobe Premiere Pro) 선택 온라인 코스 또는 튜토리얼(예: YouTube, Udemy 또는 Coursera) 찾기 연습 및 연습 편집 기술 연구(예: 전환, 특수 효과 및 크로마 그레이딩) 오류를 찾고 클립을 개선하기 위한 피드백을 받습니다. 새로운 소프트웨어, 기능 및 기술에 대해 계속해서 호기심을 갖고 알아보세요.

의사 클래스 - 기본

17 Feb 2025

(Alexis Goldstein, Louis Lazaris 및 Estelle Weyl의 "실제 세계를위한 HTML5 & CSS3"에서 적응) 핵심 포인트 CSS 의사 클래스는 구조, 사용자 운영, 입력 및 부정 의사 클래스 및 기타 유형을 포함한 특수 요소 상태를 정의하는 데 사용됩니다. 문서 트리의 요소 위치, 사용자 상호 작용, 양식 요소 상태 또는 특정 선택기와 일치하지 않는 요소를 기반으로 요소를 스타일링 할 수 있습니다. 일부 의사 클래스에는 다음과 같은 보안 문제가있을 수 있습니다. 현대식 브라우저는 다음으로 제한됩니다

See all articles