HTML5의 API의 Canvas 태그를 사용하여 여러가지 도형 및 이미지를 쉽고 간단하게 그릴 수 있습니다. 그런데 만약 투명한 도형이나 그림자, 텍스트 등을 추가하려면 어떻게 하는지 알아봅니다.# Canvas 태그에 투명 효과(opacity) 적용하는 방법이번에는 투명효과인 transparent, opacity 효과를 주기 위한 방법으로 Canavas에서는 바로 globalAlpha를 사용합니다. 이 프로퍼티는 캔버스의 컨텍스트에 적용 가능한 프로퍼티로 추가할 요소를 투명하게 만들어 주는 매우 유용한 방법입니다. 사용 방법은 아주 간단합니다. globalAlpha에 숫자값을 적용하면 됩니다.context.globalAlpha = 0.5;매우 간단합니다. 위와 같이 숫자를 적용하며 0.5는 50%의 투명도를 가지게 됩니다. 그럼 예제를 알아보겠습니다.# Canvas opacity 투명효과 예제보기, globalAlpha아래는 Canvas 영역에 context를 만들고 여기에 투명도
2019-01-26 06:18:42HTML5의 캔버스(canvas) 요소에 이미지를 추가하는 방법에 대하여 알아봅니다. 어떻게하면 이미지를 추가할 수 있을까요? 이미지를 추가하는 것은 가능할까요?# canvas에 이미지 추가하는 방법canvas에는 도형을 그리기도 하지만 원하는 이미지를 추가할 수도 있습니다. 이미지를 추가하기 위해서는 drawImage() 함수를 사용합니다.drawImage(image, x, y);- image : 추가할 이미지를 가르킴- x : 좌측으로부터 우측 거리 위치- y : 상단으로부터 하단 거리 위치이미지) 예제에 사용할 이미지! Canvas에 적용한 모습 확인하기만약 위 이미지를 캔버스에 추가하는 경우 어떻게 나타날까요? x, y값을 각각 100인 경우에 아래처럼 나타나게됩니다.drawImage(image, 100, 100);! Canvas에 이미지 크기를 지정하는 경우이미지 크기를 다르다면 어떻게할까요? 만약 캔버스에 추가할때 실제 이미지 크기와 다르게 추가하는 경우 아래와 같이 wi
2018-07-02 14:31:31얼마 전 캔버스(canvas)를 사용하여 원을 그리는 방법을 알아보았습니다. 이번에는 원이 아닌 캔버스에 곡선을 그리는 방법에 대하여도 알아보려고 합니다. 어떻게 하면 부드러운 곡선을 그릴 수 있을까요?# 캔버스(canvas)에 원을 그리는 방법canvas 요소에 원을 그리는 방법은 크게 세 가지를 사용할 수 있습니다. 구분해보면...1. arc() // 원을 그리거나 곡선을 그릴 수 있음2. arcTo() // 커브를 그리는 데 사용 가능3. benzierCurveTo() // 베지에 커브를 사용하여 부드럽게 연결arc()는 원을 그리는 방법으로 이미 알아보았죠? 하지만 arc()를 사용할 때 원을 전체를 그리는 것이 아니라 일부까지만 연결한다면? 이 경우 곡선을 그릴 수 있습니다.arc()를 사용하여 원 그리기 바로가기 > https://webisfree.com/2018-06-07/[html5]-캔버스(canvas)에-원-그리기오늘 알아볼 방법은 1번을 제외한 2번 그
2018-06-17 22:07:28canvas에 그리는 경우 context 영역에 설정된 기존의 스타일을 저장하고 다시 불러올 수 있는 save(), restore() 함수에 대하여 알아봅니다.# 캔버스 적용중인 스타일 저장 또는 불러오기하나의 context 영역에는 하나의 스타일만 가질 수 있습니다. 다양한 스타일의 도형 등을 그리기 위해서는 반복적인 스타일 지정이 필요한데 만약 이전에 그렸던 스타일을 저장, 기억한 후 다시 컨텍스트에 불러와 그릴 경우 save(), restore() 함수를 사용할 수 있습니다.! 알아둘 것이전에 사용했던 스타일을 다시 선택할 수 있는 이 방법은 기존의 방문했던 웹페이지를 다시 방문할 경우처럼 히스토리를 찾는 것과 비슷하게 동작합니다. 만약 한꺼번에 많은 스타일을 저장해서 불러와 사용하는 경우라면 변수에 저장하고 이를 불러오는 방법이 좋을 수 있습니다. 이 방법의 장점은 최근 사용했던 스타일을 다시 적용할 경우 빠르게 적용할 수 있다는 점입니다. 스타일 지정을 다시 할 필요가 없
2018-06-14 18:25:32HTML5에서는 canvas태그에 다양한 도형을 간단하고 쉽게 그릴 수 있습니다. 도형 중에서 많이 사용되는 원을 그리는 방법을 알아봅니다. 어떻게하면 원을 그릴 수 있을까요?# canvas 태그를 사용하여 원 그리는 방법캔버스에 원을 그리는 방법으로 두 가지 방법이 존재하며 컨텍스트에 다음 함수를 사용합니다. arc() 그리고 arcTo()입니다.1. arc()2. arcTo()위의 두 가지 함수 모두 원을 그리는데 사용할 수 있는데 쓰이는 방식이 조금 다릅니다. arcTo()는 원보다는 이어진 곡선(curve)을 그리는데 많이 사용합니다. 여기서는 arc()를 사용하는 방법을 알아봅니다.# arc()를 사용하여 원 그리는 방법arc()를 사용하여 원을 그리는 경우 아래와 같이 사용합니다. 먼저 설정 및 방법을 아래에서 알아보세요.arc(x, y, radius, startAngle, endAngle, clockwise)- x, y : 원을 그리게 될 가운데 위치- radius
2018-06-07 09:37:29HTML5의 새로운 API, CANVAS는 웹 어플리케이션에 새로운 가능성을 열어주었습니다. 데스크탑, 모바일 앱에 버금가는 게임 등을 만들 수 있게해주었지요.아래는 이런 기능을 구현하기위해 필요한 canvas에 그려진 shape, 도형을 이동시키는 방법에 대하여 알아보겠습니다.# canvas 태그에 도형 그리고 이동시키기얼마 전 올린 포스팅에서 canvas의 클릭 이벤트를 사용해 도형 등의 오브젝트 이동 방법을 알아보았습니다. 간단한 예제였지만 이때 오브젝트를 이동하기 위해서 캔버스를 지우는 작업이 필요했지요...! 이동시 캔버스를 지우고 다시 그리는 작업이 반드시 필요한가특정 오브젝트를 camvas에 그리고 이를 이동시키는 방법으로 전체를 지우거나 해당 영역을 지우고 다시 그리는 방법이 필요했습니다. 그럴 필요없이 이동시키는 방법은 없을까요? 현재까지의 CANVAS API만으로는 방법이 없어보입니다. 우리가 실제로 그림을 그렸을때 그 위의 대상을 이동시키려면 지우개 등을 이용해
2018-06-06 22:30:46HTML5의 가장 큰 특징 중 하나인 Canvas(캔버스)! Canvas에 그려진 도형(Shape)에 클릭 이벤트를 추가하려고 합니다. 어떻게하면 가능할까요? 아래에서 알아보세요.! 캔버스 내부 도형에 클릭 이벤트를 추가하는 것은 불가능먼저 캔버스 내부 도형에 직접 이벤트를 추가하는 것은 어렵습니다... 즉 캔버스 내부에 원을 그렸다면 그 원에 이벤트를 직접 걸 수 없습니다. 그 이유는 DOM에 추가된 노드와 다르기 때문에 캔버스 도형은 그려지고 보이는 역말만 수행하기 때문입니다. 물론 방법이 존재합니다. 이는 아래에 자세히 적도록 하겠습니다.# 캔버스 도형에 클릭 이벤트 추가하려면?위에 설명한 것처럼 도형에 직접 이벤트를 추가할 수 없지만 캔버스 태그는 이벤트를 발생할 수 있습니다. 이를 사용하는 방법으로 아래의 방법들이 사용됩니다.1. 캔버스 내부에 그려진 도형 범위를 기억하기2. 도형마다 다른 색을 부여하고 이를 확인하기두 가지 방법 모두 몇 가지 조건이 필요합니다. 그 중 하
2018-05-31 20:18:34svg 그리고 canvas 장단점 나열하기
2017-04-27 02:52:55html5의 가장 큰 특징 중 하나가 바로 Canvas API에 의한 그래픽 구현의 기능 및 성능 향상을 빼놓을 수 없습니다. 게다가 canvas 태그를 사용해 2d 또는 3d 이미지의 구현 역시 가능하죠. canvas 태그는 자바스크립트를 함께 사용해야 하며 다양한 도형을 그릴 수 있다. 아래는 canvas 태그를 사용한 사각형을 그리는 예제를 통해 canvas 태그를 사용하는 방법에 대하여 익혀보겠습니다.# 캔버스 태그를 사용한 사각형 그리기먼저 예제를 사용하여 알아봅니다. 아래는 canvas 예제를 알아보기 위해 사용하는 html 및 css 코드입니다.@ canvas.html<canvas id="cv"> Sorry. Your browser is not support canvas element.</canvas>@ canvas.csscanvas { border: 1px solid #999; width: 200px; height: 100px;}canvas 태그를 지원하지 않는
2015-09-21 17:34:58최근 로테이션되는... 즉 자동으로 바뀌는 갤러리를 만들어 정상 작동되는 것을 확인했습니다. 모든 브라우저에서 이상없이 구현되었는데 (반응형 페이지 역시 이상없음...) 에뮬레이터가 아닌 실제 모바일에서 확인하니 갤러리가 정상적으로 보이지 않고 아무것도 표시되지 않더군요... 그래서 Xcode의 inspector를 사용해 뭐가 문제인지 알아봤습니다...클래스명이 canvas인 div 태그의 height가 0으로 자동 변경됨"원인은 자동으로 height값이 0으로 inline 값으로 설정되는 것이었습니다... 그래서 그 이유를 알기위해 몇가지 debugging해보니 div 태그의 설정된 클래스명이 canvas이기 때문이었습니다. 그 이유는 사실 잘 모르겠으나 canvas 태그와 같은 이름으로 클래스에서 사용하였기 때문이라고 추측... 모든 class 명들을 css와 html에서 수정하였습니다. 그 결과 모두 정상 출력되었습니다.테스트 디바이스가 iPhone이라 Android에서는 정상
2015-03-18 15:27:52
