How to draw the outline of text using HTML5 canvas-H5 Tutorial-php.cn

How to draw the outline of text using HTML5 canvas

不言

Release： 2018-12-07 09:35:34

Original

5277 people have browsed it

If you want to use HTML5 Canvas to draw the outline of text, we need to use the strokeText() method in the canvas context. Let’s look at the specific content below.

HTML5 canvas

Let’s look at the specific example first

The code is as follows

Create the following HTML file

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <style type="text/css">
    <!--
    /*背景颜色和背景图*/
    .canvas {
      background-color: #FFFFFF;
      background-image: url("img/flower.jpg");
    }
    -->
  </style>
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);

    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }

    var context = canvas.getContext(&#39;2d&#39;);
    context.font = &#39;normal 28pt "楷体"&#39;;
    context.strokeText(&#39;你好，PHP中文网！！！&#39;, 60, 200);
  }
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="360" class="canvas"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

Copy after login

Description:

The following will get the canvas object and get the context.

var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
  if ( ! canvas || ! canvas.getContext ) {    return false;
  }
  var context = canvas.getContext(&#39;2d&#39;);

Copy after login

The following is the code for drawing characters. Specify the font information of the character to be drawn in the font property, use the strokeText() method to draw the string outline on the canvas, as the first parameter the string drawn, the X coordinate and Y coordinate of the drawing start are given to the second and The third parameter.

context.font = &#39;normal 28pt "楷体"&#39;;
context.strokeText(&#39;你好，PHP中文网！！！&#39;, 60, 200);

Copy after login

Running results

Use a web browser to display the above HTML file. You will get the display effect as shown below.

HTML5 canvas

The above is the detailed content of How to draw the outline of text using HTML5 canvas. For more information, please follow other related articles on the PHP Chinese website!