캔버스에 텍스트를 그립니다.

Context 개체의 fillText(string, x, y) 메서드는 텍스트를 그리는 데 사용됩니다. 해당 메서드의 세 가지 매개 변수는 텍스트 내용, x 좌표 및 시작점의 y 좌표입니다. 사용하기 전에 글꼴을 사용하여 글꼴, 크기, 스타일을 설정해야 합니다(작성 방법은 CSS의 글꼴 속성과 유사합니다). 이와 유사하게 속이 빈 단어를 추가하는 데 사용되는 스트로크텍스트 메서드가 있습니다. 또 다른 참고 사항: fillText 메서드는 텍스트 줄 바꿈을 지원하지 않습니다. 즉, 모든 텍스트가 한 줄에 표시됩니다. 따라서 여러 줄의 텍스트를 생성하려면 fillText 메서드를 여러 번만 호출하면 됩니다.

코드는 다음과 같습니다:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>huatu</title>
<body>
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
    //通过id获得当前的Canvas对象
 var canvasDom = document.getElementById("demoCanvas");
    //通过Canvas Dom对象获取Context的对象
 var context = canvasDom.getContext("2d");
    context.moveTo(200,200);
    // 设置字体
 context.font = "Bold 50px Arial";
    // 设置对齐方式
 context.textAlign = "left";
    // 设置填充颜色
 context.fillStyle = "#005600";
    // 设置字体内容，以及在画布上的位置
 context.fillText("PHP中文网!", 10, 50);
    // 绘制空心字
 context.strokeText("www.php.cn!", 10, 100);
</script>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>huatu</title> <body> <canvas id="demoCanvas" width="500" height="600"></canvas> <script type="text/javascript"> //通过id获得当前的Canvas对象 var canvasDom = document.getElementById("demoCanvas"); //通过Canvas Dom对象获取Context的对象 var context = canvasDom.getContext("2d"); context.moveTo(200,200); // 设置字体 context.font = "Bold 50px Arial"; // 设置对齐方式 context.textAlign = "left"; // 设置填充颜色 context.fillStyle = "#005600"; // 设置字体内容，以及在画布上的位置 context.fillText("PHP中文网!", 10, 50); // 绘制空心字 context.strokeText("www.php.cn!", 10, 100); </script> </body> </html>

제출하다 코드 재설정

자동운전