search

Home  >  Article  >  Web Front-end  >  How to draw the outline of text using HTML5 canvas

How to draw the outline of text using HTML5 canvas

不言
不言Original
2018-12-03 16:55:135283browse

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>

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;);

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);

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to draw text using HTML5 canvasNext article：How to draw text using HTML5 canvas

Related articles

See more