HTML 캔버스에 사용자 정의 글꼴을 추가하는 방법

3674 단어 htmlbeginnersjavascriptgamedev
그래서 어제 캔버스 작업을 하다가 CSS에서 @font-face를 사용하여 추가하려고 했던 글꼴이 전혀 작동하지 않는다는 것을 깨달았습니다.

내 위치의 모든 개발자가 할 것이라고 생각하는 작업을 수행한 후 StackOverflow에서 검색하는 것을 의미합니다. 이것은 꽤 일반적인 문제라는 것을 알았습니다.

그러나 이것을 어떻게 해결할 수 있습니까? 글쎄요, 솔루션은 간단하지만 HTML, CSS 및 Javascript에 대한 최소한의 기본 지식이 있기를 바랍니다.

HTML



<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Canvas Project</title>
<style type="text/css"  rel="stylesheet">
    body {
        margin: 0;
    }
</style>
</head>
<body>
<canvas></canvas>
<script src="canvas.js"></script>
</body>
</html>

보시다시피 여기 간단한 HTML5 문서가 있습니다. 여기에는 <canvas> 태그와 <script> 태그가 있어 자바스크립트 코드를 로드하는 데 사용할 것입니다.

자바스크립트



이제 사용자 정의 글꼴을 로드할 수 있는 javascript 파일을 작업할 차례입니다. 단계별로 설명하겠습니다.

canvas = document.querySelector('canvas');

가장 먼저 해야 할 일은 변수 내부에 캔버스 요소를 가져오는 것입니다. 이를 위해 요소 이름(이 경우 'canvas')을 수신하는 document.querySelector() 메서드를 사용합니다. 이제 자바스크립트 코드에서 캔버스 요소와 상호 작용할 수 있습니다.

canvas = document.querySelector('canvas');
var myFont = new FontFace('myFont', 'url(assets/fonts/myFont/myFont.otf)');

이제 글꼴 패밀리와 소스를 수신하는 javascript 클래스FontFace를 사용하여 글꼴 개체를 만듭니다.

이것은 실험적인 기술입니다. i의 브라우저 호환성에 대해 자세히 알아볼 수 있습니다here.

canvas = document.querySelector('canvas');
var myFont = new FontFace('myFont', 'url(assets/fonts/myFont/myFont.otf)');

myFont.load().then(function(font){

  // our code here

});

이제 글꼴을 로드할 수 있습니다. 보시다시피 글꼴을 로드한 후 .then()를 사용하는 것은 비동기 작업이므로 계속하기 전에 글꼴을 가져와야 하기 때문입니다.

canvas = document.querySelector('canvas');
var myFont = new FontFace('myFont', 'url(assets/fonts/myFont/myFont.otf)');

myFont.load().then(function(font){

  // with canvas, if this is ommited won't work
  document.fonts.add(font);
  console.log('Font loaded');

});

거기 당신이 간다. 여기서 일어난 일은 객체FontFace에게 글꼴을 로드하도록 지시한 다음 해당 글꼴을 .load() 메서드 내부에서 다음에 실행될 함수의 매개변수로 전달한 것입니다. 그런 다음 문서 글꼴에 글꼴을 추가하면 끝입니다. 이제 "Hello, World!"를 표시할 수 있습니다. 우리의 사용자 정의 글꼴로.

...

// set width and height as screen w and h
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

...

이 두 줄을 사용하여 캔버스 너비와 높이를 화면 너비 및 높이와 동일하게 지정합니다.

...

// get canvas context
var ctx = canvas.getContext("2d");
ctx.font = "50px myFont"; // set font
ctx.textAlign = "center"; // center text
ctx.fillText("Hello, World!", canvas.width/2, canvas.height/2); // draw centered text

...

이제 우리가 해야 할 일은 캔버스 컨텍스트를 가져오고 사용할 글꼴을 지정하고 텍스트를 가운데에 두고 "Hello, World!"를 그리는 것입니다. 캔버스 한가운데에 있습니다.

여기에서 전체 자바스크립트 코드를 찾을 수 있습니다. 이 정보가 유용하셨기를 바랍니다. 있다면 댓글로 알려주세요. 저를 팔로우하는 것을 잊지 마세요. 저는 비디오 게임에 초점을 맞춘 흥미로운 Shell Scripting 시리즈를 작업 중입니다. 다음 시간까지.


[블 루 브리지 컵 재 밌 다] 구간 이동 2 점 정 답.
Codility 3.1 Frog jump

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage