EN
이 콘텐츠는 한국어로 제공되지 않아 영어 버전으로 표시됩니다.

fillText method

Renders filled text to the canvas by using the current fill style and font.

HTML Canvas 2D Context, Section 11Internet Explorer 9

Syntax

CanvasRenderingContext2D.fillText(text, x, y, maxWidth);

Parameters

text [in]

Type: string

The text characters to paint on the canvas.

x [in]

Type: number

The horizontal coordinate to start painting the text at, relative to the canvas.

y [in]

Type: number

The vertical coordinate to start painting the text, relative to the canvas.

maxWidth [in, optional]

Type: number

The maximum possible text width. If the value is less than the width property, the text is scaled to fit.

Return value

This method does not return a value.

Exceptions

ExceptionCondition
SecurityError

The current font is not of the same origin or domain as the document that owns the canvas element.

Standards information

Examples

The following code example paints text that is filled with a linear gradient.


<html>
<head>
  <title>Fill Text Test</title>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
              // Add the colors with fixed stops at 1/4 of the width.
              gradient.addColorStop("0", "magenta");
              gradient.addColorStop(".25", "blue");
              gradient.addColorStop(".50", "green");
              gradient.addColorStop(".75", "yellow");
              gradient.addColorStop("1.0", "red");

              // Use the gradient.
              ctx.font = "italic 200 36px/2 Unknown Font, sans-serif"
              ctx.fillStyle = gradient;
              var i;
              for (i = 0; i < 450; i += 50) {
                  ctx.fillText("Hello World", i, i);
              }
          }
      }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="500">Canvas not supported in this mode or browser.</canvas>
</body>
</html>


See also

CanvasRenderingContext2D
strokeText

 

 

표시:
© 2014 Microsoft