EN
Ce contenu n’est pas disponible dans votre langue. Voici la version anglaise.

strokeText method

Renders the specified text at the specified position by using the current font, lineWidth, and strokeStyle property.

HTML Canvas 2D Context, Section 11Internet Explorer 9

Syntax

CanvasRenderingContext2D.strokeText(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 relative to the canvas.

y [in]

Type: number

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

maxWidth [in, optional]

Type: number

The maximum possible text width. If the value is less than width, 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

Remarks

strokeText can be used in conjunction with fillText to created filled and outlined text.

Examples

The following code example paints "Hello World" by using strokeText and fillText.


<head>
  <title>Stroke and Fill Text</title>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              ctx.font = "italic 200 36px/2 Unknown Font, sans-serif";
              ctx.strokeStyle = "blue"; // set stroke color to blue
              ctx.fillStyle = "red";  // set fill color to red
              ctx.lineWidth = "3";  //  set stroke width to 3pmx
              var i;
              for (i = 0; i < 450; i += 45) {
                  ctx.strokeText("Hello World", i, i);
                  ctx.fillText("Hello World", i, i);
              }
          }
      }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="500" border="1">Canvas not supported in this mode or browser.</canvas>
</body>
</html>


See also

CanvasRenderingContext2D
fillText
lineWidth

 

 

Afficher:
© 2014 Microsoft