방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Html 캔버스/Html 캔버스 에니메이션19 HTML Canvas 배경 이미지 슬라이딩(slide background image) * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 백그라운드에서 이미지가 자연스럽게 슬라이딩하는 애니메이션을 소개합니다. 비교적 가볍게 구현할 수 있습니다. 달리기 하는 게임류를 보면 뒷 배경이 움직이면서 캐릭터가 달리기를 하는 모양을 보곤 합니다. 대표적인 게임을 보면...윈드러너를 예로 들 수 있겠습니다. 이처럼 뒷 배경이 계속해서 움직이도록 하려면 아주 긴 이미지의 x좌표값을 0에서 이미지의 길이 값 만큼 변경 해 가면 이러한 효과를 줄 수 있습니다. 캔버스에서 이미지를 그리는 함수는 drawImage입니다. ctx.drawImage('이미지데이터',x좌표,y좌표,이미지길이,이미지넓이) 그런데 이미지의 길이가 짧다면, 이러한 방법으로는 한계가 있습니다. 먼저 한계가 있는 .. 2022. 1. 24. HTML Canvas 룰렛 기능(roulette) * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 HTML Canvas로 만든 룰렛 기능(roulette) 입니다. 룰렛은 원형 판이 빙글빙글 돌아가다 멈추는 기능입니다. 캔버스에서 이러한 룰렛기능을 만드려면 부채꼴(circular sector)을 그려주는 방법을 사용하면 됩니다. 원을 그려준 다음에 해당 각도를 계속해서 증가하면 빙글빙글 돌아 갈 것 입니다. 먼저 그려줄 부채꼴을 계산합니다. const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d') let width = canvas.width let height = canvas.height const devide = 12 //나눌 갯.. 2022. 1. 21. HTML Canvas 슬롯머신 기능(slot machine, 빠찡꼬, 파친코) * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 HTML 캔버스를 활용하여 만들어본 슬롯머신 기능(slot machine, 빠찡꼬, 파친코) 입니다. 슬롯 머신이란 아래 사진처럼 나누어진 구역에서 컨텐츠가 세로로 회전하여 목적값에 도달하는 기능입니다. 이를 캔버스에서 구현하기위해 기능을 분석하여 보았습니다. 1. 구역 나누기 2. 숫자 배치 3. 회전 속도 에니메이션 4. 목적지에 도달 시 에니메이션 종료 먼저 구역을 나누는 작업입니다. 여기에서는 총 4개의 구역으로 나눌 예정이라 먼저 position이라는 배열값에 4개의 넓이를 나누어 넣어주었습니다. 그리고 높이는 서로 같기 때문에 따로 추가하지는 않습니다. 캔버스 작업을 하면 항상 잊지말고 해주는 것이 save와 rest.. 2022. 1. 18. HTML Canvas 가상 키패드(Virtual keypad)기능 * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 HTML 캔버스로 구현한 가상 키패드 기능 입니다. 가상 키패드는 키보드 입력을 받지 않고 사용자로부터의 원하는 값을 입력받기위한 기능 입니다. 보안목적에 중점을 둔 기능이라 할 수 있습니다. 해당 기능은 이미 많은 오픈소스로 공개되어 있습니다. 대부분의 소스코드들은 HTML에서 엘리먼트를 사용하여(div, table, span 등등) 기능이 구현되어 있어서.. 사용자의 드래깅이나 소스코드 변조를 통하여 내용이 바뀔수가 있습니다. 이를 방지하기 위해 간단하게 캔버스(canvas)를 활용하여 구현하여 보았습니다. 구현할 기능은 아래와 같은 모양입니다. 위 사진처럼 필요한 영역을 그려주는데...초록색 영역은 값이 랜덤하게 바뀌는 모.. 2021. 9. 28. Html Canvas 자세히 보기(확대 보기, 크게 보기, 미리 보기, 돋보기 기능) * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 이번에 소개할 기능은 돋보기 기능(확대, 크게, 미리보기) 입니다. 돋보기 기능은 원본 이미지를 대상으로 마우스를 움직이면 사진이 크게 보이는 기능 입니다. 아래 사진처럼 이미지에 마우스를 움직이면서 해당 영역 사진이 크게보이는 기능 입니다. * 이러한 기능을 뭐라하는지 참 어렵네요.. 해당 기능을 만들기 위해서 먼저 동작과 이벤트를 고려하여 봅니다. 1. 사진이 있는 영역 2. 마우스가 움직이면서 돋보기가 가르키는 영역 3. 돋보기가 가르킨 영역의 내용이 보이는 영역 동작과 이벤트를 고려하면 캔버스가 총 3개가 필요합니다. 캔버스를 이처럼 기능과 역할에 의해 나누는 이유는, 불필요한 렌더링을 막기 위해서 입니다. 만약 1번과 .. 2021. 8. 17. Html Canvas 도형 병합(merge figure, 다각형 만들기) * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 엑셀이나 한셀, 워드 및 한글등 이러한 프로그램에서 테이블을 병합하는 기능을 종종 사용하고는 합니다. 각각의 테이블의 셀이 이쁘장하게 병합되는 것을 보고나면 참 멋지지 않은 일이 아닐 수 없습니다. 이러한 프로그램에서 병합 규칙은 무조건 사각형 모양만 된다는 점 입니다. 직사각형, 정사각형..사각형 모양 이외에는 병합 기능이 제공되지가 않습니다. 물론 표(table)라는 것은 데이터를 일정하게 정렬하고 정리하기 위한 기능이기 때문에 사각형 이외의 모양은 제공되지 않는 것이 맞습니다. 그래서 웹에서 표(table) 이상의 병합이 가능한 기능을 한번 구현하여 보았습니다. 사각형을 모아서 다각형을 만들어 주는 기능이라 할 수 있겠네요.. 2021. 8. 12. 이전 1 2 3 4 다음
