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

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

黄舟

풀어 주다： 2016-12-20 14:46:32

원래의

1046명이 탐색했습니다.

캔버스란

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 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!