CATEGORIES
HTML5의 캔버스(canvas) 요소에 이미지를 추가하는 방법에 대하여 알아봅니다. 어떻게하면 이미지를 추가할 수 있을까요? 이미지를 추가하는 것은 가능할까요?# canvas에 이미지 추가하는 방법canvas에는 도형을 그리기도 하지만 원하는 이미지를 추가할 수도 있습니다. 이미지를 추가하기 위해서는 drawImage() 함수를 사용합니다.drawImage(image, x, y);- image : 추가할 이미지를 가르킴- x : 좌측으로부터 우측 거리 위치- y : 상단으로부터 하단 거리 위치이미지) 예제에 사용할 이미지! Canvas에 적용한 모습 확인하기만약 위 이미지를 캔버스에 추가하는 경우 어떻게 나타날까요? x, y값을 각각 100인 경우에 아래처럼 나타나게됩니다.drawImage(image, 1
Last Modified : 2020-11-02 22:38:34
HTML5에서는 canvas태그에 다양한 도형을 간단하고 쉽게 그릴 수 있습니다. 도형 중에서 많이 사용되는 원을 그리는 방법을 알아봅니다. 어떻게하면 원을 그릴 수 있을까요?# canvas 태그를 사용하여 원 그리는 방법캔버스에 원을 그리는 방법으로 두 가지 방법이 존재하며 컨텍스트에 다음 함수를 사용합니다. arc() 그리고 arcTo()입니다.1. arc()2. arcTo()위의 두 가지 함수 모두 원을 그리는데 사용할 수 있는데 쓰이는 방식이 조금 다릅니다. arcTo()는 원보다는 이어진 곡선(curve)을 그리는데 많이 사용합니다. 여기서는 arc()를 사용하는 방법을 알아봅니다.# arc()를 사용하여 원 그리는 방법arc()를 사용하여 원을 그리는 경우 아래와 같이 사용합니다. 먼저 설정 및
Last Modified : 2018-06-14 20:04:47
자바스크립트를 사용하여 캔버스 요소를 이미지로 변환하여 서버에 비동기식 ajax로 전송하는 방법을 알아봅니다.# 자바스크립트 캔버스 이미지 서버로 파일 전달하기HTML5를 사용하여 Canvas 요소를 이미지로 변환하거나 저장할 수 있습니다. 그렇다면 변환된 캔버스 이미지를 서버에 ajax로 전달할 수 있을까요?캔버스 이미지를 서버에 ajax로 전달하기결론부터 얘기하면 가능합니다. 물론 과정은 조금 복잡하며 아래와 같은 순서를 따라야만 합니다.- Canvas 이미지를 데이터로 저장- 저장된 Canvas 이미지를 base64에서 디코딩- 디코딩된 값을 바이트 배열로 변환 후 저장- typed array인 8bit unsigned array로 변환- new blob() 생성자를 사용해 blob 값으로 변환- Fo
Last Modified : 2020-08-05 22:18:49
HTML5의 가장 큰 특징 중 하나인 Canvas(캔버스)! Canvas에 그려진 도형(Shape)에 클릭 이벤트를 추가하려고 합니다. 어떻게하면 가능할까요? 아래에서 알아보세요.! 캔버스 내부 도형에 클릭 이벤트를 추가하는 것은 불가능먼저 캔버스 내부 도형에 직접 이벤트를 추가하는 것은 어렵습니다... 즉 캔버스 내부에 원을 그렸다면 그 원에 이벤트를 직접 걸 수 없습니다. 그 이유는 DOM에 추가된 노드와 다르기 때문에 캔버스 도형은 그려지고 보이는 역말만 수행하기 때문입니다. 물론 방법이 존재합니다. 이는 아래에 자세히 적도록 하겠습니다.# 캔버스 도형에 클릭 이벤트 추가하려면?위에 설명한 것처럼 도형에 직접 이벤트를 추가할 수 없지만 캔버스 태그는 이벤트를 발생할 수 있습니다. 이를 사용하는 방법으로
Last Modified : 2018-06-02 16:58:52HTML5의 캔버스(Canvas) 태그를 이미지로 만들어 저장하는 방법에 대하여 알아봅니다.# HTML5 캔버스(Canvas) 태그 이미지 및 파일로 저장하는 방법캔버스 태그를 사용하면 캔버스에 그려진 내용을 이미지나 파일로 저장할 수 있습니다. 이는 캔버스 API의 가장 강력한 기능 중 하나입니다. 이때 저장 방법은 아래와 이미지 파일과 base64 중 선택할 수 있습니다.1. Base64로 변환하여 사용하기2. 파일로 변환하여 저장하기현재 보여지는 웹페이지 내부에서만 사용하거나 데이터베이스에 저장하는 용도라면 Base64로 변환하여 사용하는 방법이 좋겠죠. 만약 파일로 변환이 필요하다면 추가적으로 파일 위치 및 파일명 등을 사용해야 합니다. 그럼 하나씩 알아봅니다. 먼저 base64로 변환하는 방법입니다
Last Modified : 2020-04-18 16:05:52
HTML5의 API의 Canvas 태그를 사용하여 여러가지 도형 및 이미지를 쉽고 간단하게 그릴 수 있습니다. 그런데 만약 투명한 도형이나 그림자, 텍스트 등을 추가하려면 어떻게 하는지 알아봅니다.# Canvas 태그에 투명 효과(opacity) 적용하는 방법이번에는 투명효과인 transparent, opacity 효과를 주기 위한 방법으로 Canavas에서는 바로 globalAlpha를 사용합니다. 이 프로퍼티는 캔버스의 컨텍스트에 적용 가능한 프로퍼티로 추가할 요소를 투명하게 만들어 주는 매우 유용한 방법입니다. 사용 방법은 아주 간단합니다. globalAlpha에 숫자값을 적용하면 됩니다.context.globalAlpha = 0.5;매우 간단합니다. 위와 같이 숫자를 적용하며 0.5는 50%의 투명도
Last Modified : 2019-08-25 21:02:13
html5의 가장 큰 특징 중 하나가 바로 Canvas API에 의한 그래픽 구현의 기능 및 성능 향상을 빼놓을 수 없습니다. 게다가 canvas 태그를 사용해 2d 또는 3d 이미지의 구현 역시 가능하죠. canvas 태그는 자바스크립트를 함께 사용해야 하며 다양한 도형을 그릴 수 있다. 아래는 canvas 태그를 사용한 사각형을 그리는 예제를 통해 canvas 태그를 사용하는 방법에 대하여 익혀보겠습니다.# 캔버스 태그를 사용한 사각형 그리기먼저 예제를 사용하여 알아봅니다. 아래는 canvas 예제를 알아보기 위해 사용하는 html 및 css 코드입니다.@ canvas.html<canvas id="cv"> Sorry. Your browser is not support canvas element.</ca
Last Modified : 2018-07-25 13:37:17HTML5의 새로운 API, CANVAS는 웹 어플리케이션에 새로운 가능성을 열어주었습니다. 데스크탑, 모바일 앱에 버금가는 게임 등을 만들 수 있게해주었지요.아래는 이런 기능을 구현하기위해 필요한 canvas에 그려진 shape, 도형을 이동시키는 방법에 대하여 알아보겠습니다.# canvas 태그에 도형 그리고 이동시키기얼마 전 올린 포스팅에서 canvas의 클릭 이벤트를 사용해 도형 등의 오브젝트 이동 방법을 알아보았습니다. 간단한 예제였지만 이때 오브젝트를 이동하기 위해서 캔버스를 지우는 작업이 필요했지요...! 이동시 캔버스를 지우고 다시 그리는 작업이 반드시 필요한가특정 오브젝트를 camvas에 그리고 이를 이동시키는 방법으로 전체를 지우거나 해당 영역을 지우고 다시 그리는 방법이 필요했습니다. 그
Last Modified : 2018-06-07 10:14:35얼마 전 캔버스(canvas)를 사용하여 원을 그리는 방법을 알아보았습니다. 이번에는 원이 아닌 캔버스에 곡선을 그리는 방법에 대하여도 알아보려고 합니다. 어떻게 하면 부드러운 곡선을 그릴 수 있을까요?# 캔버스(canvas)에 원을 그리는 방법canvas 요소에 원을 그리는 방법은 크게 세 가지를 사용할 수 있습니다. 구분해보면...1. arc() // 원을 그리거나 곡선을 그릴 수 있음2. arcTo() // 커브를 그리는 데 사용 가능3. benzierCurveTo() // 베지에 커브를 사용하여 부드럽게 연결arc()는 원을 그리는 방법으로 이미 알아보았죠? 하지만 arc()를 사용할 때 원을 전체를 그리는 것이 아니라 일부까지만 연결한다면? 이 경우 곡선을 그릴 수 있습니다.arc()를
Last Modified : 2020-08-10 23:38:30canvas에 그리는 경우 context 영역에 설정된 기존의 스타일을 저장하고 다시 불러올 수 있는 save(), restore() 함수에 대하여 알아봅니다.# 캔버스 적용중인 스타일 저장 또는 불러오기하나의 context 영역에는 하나의 스타일만 가질 수 있습니다. 다양한 스타일의 도형 등을 그리기 위해서는 반복적인 스타일 지정이 필요한데 만약 이전에 그렸던 스타일을 저장, 기억한 후 다시 컨텍스트에 불러와 그릴 경우 save(), restore() 함수를 사용할 수 있습니다.! 알아둘 것이전에 사용했던 스타일을 다시 선택할 수 있는 이 방법은 기존의 방문했던 웹페이지를 다시 방문할 경우처럼 히스토리를 찾는 것과 비슷하게 동작합니다. 만약 한꺼번에 많은 스타일을 저장해서 불러와 사용하는 경우라면 변수에
Last Modified : 2018-06-20 21:13:07
자바스크립트를 사용하여 canvas(캔버스) 영역 전체에 원하는 배경색(백그라운드색)을 적용하려고 합니다. 어떻게하면 될지 방법을 알아봅니다.# 캔버스(Canvas)에 배경색 칠하기canvas에 배경색(전경색)을 어떻게 적용하면 될까요? 가장 많이 쓰이는 방법으로 캔버스와 동일한 크기의 원하는 색상의 사각형을 그리는 방법이 사용됩니다. 즉 캔버스 위에 색을 칠하는 것과 동일하게 구현할 수 있죠.구현 과정은 아래와 같습니다.1. 새로운 캔버스를 만들고 컨텍스트를 생성한다.2. 컨텍스트 내부에 원하는 색의 fillStyle 값을 설정한다.3. 캔버스와 동일한 크기로 fillRect()를 사용하여 그린다.매우 간단하죠 그럼 아래에서 간단한 예제를 만들어 적용해봅니다.! 캔버스(canvas) 배경색 예제보기아래는
Last Modified : 2020-12-22 06:09:52최근 로테이션되는... 즉 자동으로 바뀌는 갤러리를 만들어 정상 작동되는 것을 확인했습니다. 모든 브라우저에서 이상없이 구현되었는데 (반응형 페이지 역시 이상없음...) 에뮬레이터가 아닌 실제 모바일에서 확인하니 갤러리가 정상적으로 보이지 않고 아무것도 표시되지 않더군요... 그래서 Xcode의 inspector를 사용해 뭐가 문제인지 알아봤습니다...클래스명이 canvas인 div 태그의 height가 0으로 자동 변경됨"원인은 자동으로 height값이 0으로 inline 값으로 설정되는 것이었습니다... 그래서 그 이유를 알기위해 몇가지 debugging해보니 div 태그의 설정된 클래스명이 canvas이기 때문이었습니다. 그 이유는 사실 잘 모르겠으나 canvas 태그와 같은 이름으로 클래스에서 사용하
Last Modified : 2015-11-06 01:13:41svg 그리고 canvas의 장단점을 알아보려고 합니다. 제목의 범위가 너무 광범위한 것 같아 좀 더 범위를 좁혀 보자면... 웹개발이 필요한 경우 웹프론트 입장에서 svg, canvas 둘 중 하나를 사용해야 할 경우 어떤 방식을 사용하는게 좀 더 나은 선택일까요?웹퍼블리셔 및 프론트엔드 입장에서 생각해보겠습니다. 일반적인 경우 이미지 및 svg를 사용하는 것이 더 편한 방법일 것 입니다. 이유야 많겠지만 이미지나 svg 포맷은 여러 시각화 툴에서 쉽게 사용하고 다운로드 받을 수 있다는 점도 큰 이유입니다. 사실 생산성을 위해 대부분 Figma와 같은 툴의 사용이 필요하며 canvas 형태로 아이콘이나 스태틱한 이미지를 지원하는 경우는 거의 없는 것도 큰 부분입니다.특히 목적에 따라 분류하자면 svg를
Last Modified : 2020-12-21 16:31:57