자바스크립트를 사용하여 canvas(캔버스) 영역 전체에 원하는 배경색(백그라운드색)을 적용하려고 합니다. 어떻게하면 될지 방법을 알아봅니다.# 캔버스(Canvas)에 배경색 칠하기canvas에 배경색(전경색)을 어떻게 적용하면 될까요? 가장 많이 쓰이는 방법으로 캔버스와 동일한 크기의 원하는 색상의 사각형을 그리는 방법이 사용됩니다. 즉 캔버스 위에 색을 칠하는 것과 동일하게 구현할 수 있죠.구현 과정은 아래와 같습니다.1. 새로운 캔버스를 만들고 컨텍스트를 생성한다.2. 컨텍스트 내부에 원하는 색의 fillStyle 값을 설정한다.3. 캔버스와 동일한 크기로 fi...
자바스크립트를 사용하여 캔버스 요소를 이미지로 변환하여 서버에 비동기식 ajax로 전송하는 방법을 알아봅니다.# 자바스크립트 캔버스 이미지 서버로 파일 전달하기HTML5를 사용하여 Canvas 요소를 이미지로 변환하거나 저장할 수 있습니다. 그렇다면 변환된 캔버스 이미지를 서버에 ajax로 전달할 수 있을까요?캔버스 이미지를 서버에 ajax로 전달하기결론부터 얘기하면 가능합니다. 물론 과정은 조금 복잡하며 아래와 같은 순서를 따라야만 합니다.- Canvas 이미지를 데이터로 저장- 저장된 Canvas 이미지를 base64에서 디코딩- 디코딩된 값을 바이트 배열로 변환...
HTML5의 캔버스(Canvas) 태그를 이미지로 만들어 저장하는 방법에 대하여 알아봅니다.# HTML5 캔버스(Canvas) 태그 이미지 및 파일로 저장하는 방법캔버스 태그를 사용하면 캔버스에 그려진 내용을 이미지나 파일로 저장할 수 있습니다. 이는 캔버스 API의 가장 강력한 기능 중 하나입니다. 이때 저장 방법은 아래와 이미지 파일과 base64 중 선택할 수 있습니다.1. Base64로 변환하여 사용하기2. 파일로 변환하여 저장하기현재 보여지는 웹페이지 내부에서만 사용하거나 데이터베이스에 저장하는 용도라면 Base64로 변환하여 사용하는 방법이 좋겠죠. 만약...
HTML5의 API의 Canvas 태그를 사용하여 여러가지 도형 및 이미지를 쉽고 간단하게 그릴 수 있습니다. 그런데 만약 투명한 도형이나 그림자, 텍스트 등을 추가하려면 어떻게 하는지 알아봅니다.# Canvas 태그에 투명 효과(opacity) 적용하는 방법이번에는 투명효과인 transparent, opacity 효과를 주기 위한 방법으로 Canavas에서는 바로 globalAlpha를 사용합니다. 이 프로퍼티는 캔버스의 컨텍스트에 적용 가능한 프로퍼티로 추가할 요소를 투명하게 만들어 주는 매우 유용한 방법입니다. 사용 방법은 아주 간단합니다. globalAlpha...
HTML5의 캔버스(canvas) 요소에 이미지를 추가하는 방법에 대하여 알아봅니다. 어떻게하면 이미지를 추가할 수 있을까요? 이미지를 추가하는 것은 가능할까요?# canvas에 이미지 추가하는 방법canvas에는 도형을 그리기도 하지만 원하는 이미지를 추가할 수도 있습니다. 이미지를 추가하기 위해서는 drawImage() 함수를 사용합니다.drawImage(image, x, y);- image : 추가할 이미지를 가르킴- x : 좌측으로부터 우측 거리 위치- y : 상단으로부터 하단 거리 위치이미지) 예제에 사용할 이미지! Canvas에 적용한 모습 확인하기만약 위...
얼마 전 캔버스(canvas)를 사용하여 원을 그리는 방법을 알아보았습니다. 이번에는 원이 아닌 캔버스에 곡선을 그리는 방법에 대하여도 알아보려고 합니다. 어떻게 하면 부드러운 곡선을 그릴 수 있을까요?# 캔버스(canvas)에 원을 그리는 방법canvas 요소에 원을 그리는 방법은 크게 세 가지를 사용할 수 있습니다. 구분해보면...1. arc() // 원을 그리거나 곡선을 그릴 수 있음2. arcTo() // 커브를 그리는 데 사용 가능3. benzierCurveTo() // 베지에 커브를 사용하여 ...
canvas에 그리는 경우 context 영역에 설정된 기존의 스타일을 저장하고 다시 불러올 수 있는 save(), restore() 함수에 대하여 알아봅니다.# 캔버스 적용중인 스타일 저장 또는 불러오기하나의 context 영역에는 하나의 스타일만 가질 수 있습니다. 다양한 스타일의 도형 등을 그리기 위해서는 반복적인 스타일 지정이 필요한데 만약 이전에 그렸던 스타일을 저장, 기억한 후 다시 컨텍스트에 불러와 그릴 경우 save(), restore() 함수를 사용할 수 있습니다.! 알아둘 것이전에 사용했던 스타일을 다시 선택할 수 있는 이 방법은 기존의 방문했던 ...
HTML5에서는 canvas태그에 다양한 도형을 간단하고 쉽게 그릴 수 있습니다. 도형 중에서 많이 사용되는 원을 그리는 방법을 알아봅니다. 어떻게하면 원을 그릴 수 있을까요?# canvas 태그를 사용하여 원 그리는 방법캔버스에 원을 그리는 방법으로 두 가지 방법이 존재하며 컨텍스트에 다음 함수를 사용합니다. arc() 그리고 arcTo()입니다.1. arc()2. arcTo()위의 두 가지 함수 모두 원을 그리는데 사용할 수 있는데 쓰이는 방식이 조금 다릅니다. arcTo()는 원보다는 이어진 곡선(curve)을 그리는데 많이 사용합니다. 여기서는 ...
HTML5의 새로운 API, CANVAS는 웹 어플리케이션에 새로운 가능성을 열어주었습니다. 데스크탑, 모바일 앱에 버금가는 게임 등을 만들 수 있게해주었지요.아래는 이런 기능을 구현하기위해 필요한 canvas에 그려진 shape, 도형을 이동시키는 방법에 대하여 알아보겠습니다.# canvas 태그에 도형 그리고 이동시키기얼마 전 올린 포스팅에서 canvas의 클릭 이벤트를 사용해 도형 등의 오브젝트 이동 방법을 알아보았습니다. 간단한 예제였지만 이때 오브젝트를 이동하기 위해서 캔버스를 지우는 작업이 필요했지요...! 이동시 캔버스를 지우고 다시 그리는 작업이 반드시...
HTML5의 가장 큰 특징 중 하나인 Canvas(캔버스)! Canvas에 그려진 도형(Shape)에 클릭 이벤트를 추가하려고 합니다. 어떻게하면 가능할까요? 아래에서 알아보세요.! 캔버스 내부 도형에 클릭 이벤트를 추가하는 것은 불가능먼저 캔버스 내부 도형에 직접 이벤트를 추가하는 것은 어렵습니다... 즉 캔버스 내부에 원을 그렸다면 그 원에 이벤트를 직접 걸 수 없습니다. 그 이유는 DOM에 추가된 노드와 다르기 때문에 캔버스 도형은 그려지고 보이는 역말만 수행하기 때문입니다. 물론 방법이 존재합니다. 이는 아래에 자세히 적도록 하겠습니다.# 캔버스 도형...