메모장



HTML5의 소개 및 지원되는 않는 브라우져에서의 사용법 (2 - canvas Text API) html5



저자 : Mark Pilgrim

 - canvas text API

사용하고 있는 브라우져가 canvas API를 지원한다면 canvas text API는 지원하지 않을것이다. canvas API는 시간이
지나면서 점점 늘어나고 있지만, text기능은 늦게 지원될 것이다. 몇몇 브라우져는 text API를 지원하기 전에 canvas를
먼저 지원하고 있다.

사용하는 브라우져가 canvas API를 지원한다면 DOM객체는 getContext() method로 <canvas>태그를 확인할 수 있도록
해준다.
사용하고 있는 브라우져가 canvas API를 지원하지 않는다면 DOM객체는 일반적인 method로 <canvas>태그를 만들 수
있도록 해준다.

function supports_canvas_text() {
  if (!supports_canvas()) { return false; }
  var dummy_canvas = document.createElement('canvas');
  var context = dummy_canvas.getContext('2d');
  return (typeof context.fillText == 'function');
}

canvas를 사용하기 위해서는 canvas가 지원되는지에 대한 확이부터 시작한다. support_canvas()함수에 대해 이전 섹션에서 확인할 수 있다.
사용하는 브라우져가 canvas API를 지원하지 않다는다면 text API지원도 안될 것이다.

if (!supports_canvas()) { return false; }

다음은 <canvas>태그와 context에 그릴 객체를 만든다. support_canvas()에서 이미 getContext method가 모든 canvas객체에 존재하는지에 대해 확인했기 때문에 사용이 가능하다.

var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');

마지막으로 drawing context가 fillText()함수를 사용할 수 있는지에 대한 확인을 해야한다. 가능하다면 canvas text API의 사용이 가능하다.

return (typeof context.fillText == 'function');

이 기능을 쓰기전에 Modernizr를 사용하여 canvas text API의 지원을 받을 수 있다.

if (Modernizr.canvastext) {
  // let's draw some text!
} else {
  // no native canvas text support available :(
}

원서 : http://diveintohtml5.org/detect.html

덧글

댓글 입력 영역