canvas+gif.js 자신의 디지털 비 두상 을 만 드 는 예제 코드
사용 설명
1.당신 이 좋아 하 는 두상 을 올 리 고,마지막 은 정사각형 입 니 다.
2.생 성 후 문자 색상 이 너무 기괴 한 지 확인 하여 문자 색상 을 변경 할 수 있 습 니 다.
3.마음 에 들 면 오른쪽 단 추 를 누 르 고 다른 이름 으로 저장 하면 된다.
gif.js
오늘 의 주인공 은 gif.js 입 니 다.gif.js 는 브 라 우 저 에서 H5api 에 의존 하면 gif 애니메이션 을 할 수 있 는 라 이브 러 리 입 니 다.여기 서 제 가 맞 춘 구 덩이 를 소개 합 니 다.디지털 비 를 그 리 는 것 에 관 해 서 는 정원 에 관련 글 이 있 으 니 나 는 함부로 비비 지 않 겠 다.
gif.js 는 canvas 움 직 이 는 그림 에 따라 gif 를 쉽게 얻 을 수 있 습 니 다.
//
var gif = new GIF({
workers: 2,// worker。
quality: 10//
});// GIF
// ， gif ， img/canvas ， ctx
gif.addFrame(imageElement);
// or a canvas element
gif.addFrame(canvasElement, {delay: 200});// 200
// or copy the pixels from a canvas context
gif.addFrame(ctx, {copy: true});
gif.on('finished', function(blob) {// blob
window.open(URL.createObjectURL(blob));
});
gif.render();//
1.git.addFrame 은 한 프레임 을 추가 합 니 다.움 직 이 는 gif 를 만 들 려 면 순환 해 야 합 니 다.
for(...){
gif.render(...)
}
var gif = new GIF({
workers: 2,
quality: 10,
workerScript:'./gif.worker.js'
});이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
인터랙티브 애니메이션코드와 ZIP 파일이 포함된 전체 정보 페이지는 다음과 같습니다. 그리고 Medium에 대한 전체 기사: 이미지 애니메이션은 스프라이트로 만들 수 있습니다. Sprite는 모든 프레임의 그림을 포함하는 이미지인 Sp...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
