캔버스 요소에 텍스트를 쓰려고하는데 글꼴 옵션이 완전히 무시되고있는 것으로 보입니다. 내가 무엇을 바꿀지라도 모두 똑같은 것으로 나오는데, 나는 이것이 10px의 기본 산세 리프라고 생각한다. 내가 갖고있는 것 (이 기능은로드시 실행 됨)HTML 5 캔버스 글꼴이 무시됩니다.
function start()
{
canvas = document.getElementById('c');
ctx = canvas.getContext('2d');
ctx.fillStyle = "white";
ctx.font = "12px monospace";
ctx.textBaseline = "top";
}
Firefox 또는 Chrome에서 작동하지 않습니다. 그것이 나오는 것에
는
ctx.font 변경이 그것이 마법처럼 작동하게
fillText()
을하고 그와 같은 기능에 이용 될 필요가있다.
편집
그의 주석에서 언급 richtaur,이 대답은 잘못된 것입니다. canvas.getContext ('2d')를 다시 호출 할 때 현재 재설정되므로 컨텍스트를 저장하고 복원해야합니다 (ctx.save() 및 ctx.restore()).
나는 canvas.getContext ('2d')를 사용하여 그래픽 컨텍스트를 다시 취득 할 때마다 기본 글꼴로 재설정되는 새로운 컨텍스트를 얻는다고 생각합니다. 이는 드로잉 작업을 수행하고 모든 다른 글꼴로 모든 종류의 텍스트를 렌더링하고 각 프레임을 렌더링 할 때 순환시켜주기 때문에 의미가 있습니다 ... 새로운 문맥마다 글꼴을 설정하면 감각. – Triynko
> ctx.font 변경은 fillText()를 수행하는 동일한 함수에서 사용해야합니다. <- 어떻게 작동하는지는 아닙니다. 설정은 해당 컨텍스트에 대해 전역이므로 다른 함수에서 재정의되고있을 가능성이 큽니다. 컨텍스트의 상태를 저장하려면'ctx.save()','ctx.restore()'와 같이하고 싶을 것이다. 참조 : https://developer.mozilla.org/ko/Drawing_text_using_a_canvas – richtaur
캔버스의 크기를 재설정하면이 문제가 발생할 수도 있습니다. 적어도 Chrome 23에서이 사실을 알았습니다.
context.font = 'bold 20px arial';
canvas.width = 100;
canvas.height = 100;
console.log(context.font); // gives '10px sans-serif'
위대한 팁! 나는 이것에 영원히 보냈다. 크기가 바뀌면 왜 그런 속성이 재설정됩니까? 내게 무의미한 것 같아. – AdrianCooney
"12 px monospace"와 같은 잘못된 형식 문자열을 추가 공백으로 전달하는 경우에도 마찬가지입니다. – Noumenon