溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

使用HTML5 canvas繪制文字輪廓的方法

發(fā)布時(shí)間：2020-04-16 10:33:38 來源：億速云 閱讀：792 作者：小新 欄目：web開發(fā)

今天小編給大家分享的是使用HTML5 canvas繪制文字輪廓的方法，很多人都不太了解，今天小編為了讓大家更加了解HTML5 canvas繪制文字輪廓的方法，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會(huì)有所收獲的哦。

使用HTML5 canvas繪制文字輪廓的方法

我們先來看具體的示例

代碼如下

創(chuàng)建以下的HTML文件

<!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('SimpleCanvas');

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

    var context = canvas.getContext('2d');
    context.font = 'normal 28pt "楷體"';
    context.strokeText('你好，億速云?。?！', 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>

說明：

下面的將獲取canvas對(duì)象并獲取上下文。

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

以下是繪制字符的代碼。指定要在font屬性中繪制的字符的字體信息，使用strokeText（）方法在畫布上繪制字符串輪廓，作為第一個(gè)參數(shù)繪制的字符串，繪圖開始的X坐標(biāo)和Y坐標(biāo)被賦予第二個(gè)和第三個(gè)參數(shù)。

context.font = 'normal 28pt "楷體"';
context.strokeText('你好，億速云?。?！', 60, 200);

運(yùn)行結(jié)果

使用Web瀏覽器顯示上述HTML文件。

以上就是使用HTML5 canvas繪制文字輪廓方法的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來億速云行業(yè)資訊

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手