HTML5 Canvas 시작하기(1) - 기본 개념-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML5 Canvas 시작하기(1) - 기본 개념

黄舟

Dec 20, 2016 pm 02:46 PM

canvas html5 기본 개념

캔버스란

Mozilla에는 Canvas에 대한 많은 튜토리얼이 있지만, 저는 학습 과정을 기록하기로 결정했습니다. 내가 작성한 내용이 충분히 명확하지 않다고 생각되면 참고 자료에서 Mozilla 웹사이트의 Canvas 튜토리얼 링크를 찾을 수 있습니다.

또한 여기에서 몇 가지 흥미로운 Canvas 예제를 찾을 수 있습니다.

캔버스 사용 시작

캔버스 사용은 다른 HTML 요소를 사용하는 것과 마찬가지로 페이지에

<canvas id="screen" width="400" height="400"></canvas>

로그인 후 복사

물론, 이는 단순히 Canvas 개체를 생성하고 이에 대한 어떠한 작업도 수행하지 않습니다. 이때 캔버스 요소는 div 요소와 다르지 않으며 페이지에는 아무것도 표시되지 않습니다.)
또한 canvas 요소의 크기는 width 및 height 속성을 통해 지정할 수 있으며 이는 img 요소와 다소 유사합니다.
Canvas의 핵심: Context
앞서 언급했듯이 Canvas 객체는 JavaScript를 통해 그래픽 그리기, 이미지 합성 등의 작업을 수행할 수 있습니다. 이러한 작업은 Canvas 객체 자체를 통해 수행되지 않고, Context의 일부를 통해 수행됩니다. Canvas 객체. getContext 메소드는 수행할 Canvas 작업 컨텍스트를 가져옵니다. 즉, 나중에 Canvas 개체를 사용할 때 Canvas 개체의 Context를 다루게 되며, Canvas 개체 자체를 사용하여 Canvas 개체의 크기와 같은 정보를 얻을 수 있습니다.
캔버스 개체의 컨텍스트를 가져오는 것은 매우 간단합니다. 호출할 때 현재 사용 가능한 유일한 유형 값은 2d입니다.

<canvas id="screen" width="400" height="400"></canvas> 
<script type="text/javascript"> 
var canvas = document.getElementById("screen"); 
var ctx = canvas.getContext("2d"); 
</script>

로그인 후 복사

Firefox 3.0.x의 당혹감

Firefox 3.0.x는 canvas 요소를 지원하지만, 사양에 있는 fillText 및 MeasureText 두 가지 메소드는 사양을 완벽하게 준수하지 않습니다. Firefox 3.0 .x에서는 여러 Firefox 관련 메서드로 대체되었습니다. 따라서 Firefox 3.0.x에서 Canvas를 사용할 때 먼저 서로 다른 브라우저에서 이러한 메서드 간의 차이점을 수정해야 합니다.

다음 코드는 Firefox 3.0.x의 Canvas Context 개체와 HTML5 사양 간의 불일치를 수정하는 Mozilla Bespin 프로젝트에서 가져온 것입니다.

function fixContext(ctx) { 
// * upgrade Firefox 3.0.x text rendering to HTML 5 standard 
if (!ctx.fillText && ctx.mozDrawText) { 
ctx.fillText = function(textToDraw, x, y, maxWidth) { 
ctx.translate(x, y); 
ctx.mozTextStyle = ctx.font; 
ctx.mozDrawText(textToDraw); 
ctx.translate(-x, -y); 
}; 
} 
// * Setup measureText 
if (!ctx.measureText && ctx.mozMeasureText) { 
ctx.measureText = function(text) { 
if (ctx.font) ctx.mozTextStyle = ctx.font; 
var width = ctx.mozMeasureText(text); 
return { width: width }; 
}; 
} 
// * Setup html5MeasureText 
if (ctx.measureText && !ctx.html5MeasureText) { 
ctx.html5MeasureText = ctx.measureText; 
ctx.measureText = function(text) { 
var textMetrics = ctx.html5MeasureText(text); 
// fake it &#39;til you make it 
textMetrics.ascent = ctx.html5MeasureText("m").width; 
return textMetrics; 
}; 
} 
// * for other browsers, no-op away 
if (!ctx.fillText) { 
ctx.fillText = function() {}; 
} 
if (!ctx.measureText) { 
ctx.measureText = function() { return 10; }; 
} 
return ctx; 
}

로그인 후 복사

참고: Opera 기준 9.5부터 Opera는 아직 HTML5 사양에서 fillText 및 관련 메서드와 Canvas 개체의 속성을 지원하지 않습니다.

Hello, Canvas!

Canvas에 대한 사전 이해를 마친 후 유명한 HelloWorld "Hello, Canvas"의 또 다른 분기인 첫 번째 Canvas 프로그램을 작성하기 시작했습니다.

로그인 후 복사

예제를 실행하면 Canvas 개체가 있는 영역에 "Hello, World!"가 표시됩니다. 이는 코드에서 ctx.fillText("Hello, World!", 20, 20)와 정확히 같습니다.

fillText 및 관련 속성

fillText 메소드는 Canvas에 텍스트를 표시하는 데 사용됩니다. 이 메소드는 4개의 매개변수를 사용할 수 있으며 그 중 마지막 매개변수는 선택사항입니다.

void fillText( in DOMString text, in float x, in float y, [Optional] in float maxWidth);

여기서 maxWidth는 텍스트를 표시할 때 최대 너비를 나타내며, 이는 텍스트가 오버플로되는 것을 방지할 수 있습니다. 그러나 테스트에서 발견했습니다. Firefox와 Chomre에 maxWidth를 지정하면 아무런 효과가 없습니다.

fillText 메소드를 사용하기 전에 Context의 글꼴 속성을 설정하여 표시되는 텍스트의 글꼴을 조정할 수 있습니다. 위의 예에서는 표시되는 텍스트의 글꼴로 "20pt Arial"을 사용했습니다. 특정 효과를 보려면 다른 글꼴 값을 직접 설정할 수 있습니다.

위 내용은 HTML5 Canvas 시작하기(1) - 기본 개념입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!