canvas学习笔记(四）----绘制文本

最新推荐文章于 2024-12-05 10:57:32 发布

原创最新推荐文章于 2024-12-05 10:57:32 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

前端同时被 2 个专栏收录

32 篇文章

订阅专栏

canvas

8 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas API中的fillText和strokeText方法来绘制文本，包括设置字体样式、文本对齐方式、文本方向及基线对齐选项。通过示例代码展示如何在Canvas上绘制Hello World。

1.fillText（text,x,y[,maxWidth]）在指定的（x,y）位置填充指定的文本，绘制的最大宽度是可选的

2.strokeText(text,x,y,[,maxWidth])在指定的（x,y）位置绘制文本边框，绘制的最大宽度是可选的

3.font = value 文本的字体样式

4.textAlign = value 文本对齐方式，start、end、left、right和center

5.direction = value 文本方向，ltr、rtl、inherit

6.textBaseline = value 基线对齐选项。top、hanging、middle、alphabetic、ideographic、bottom

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day4-1</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="150" height="150">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas.getContext('2d');
        
        ctx.font = "48px serif";
        //ctx.textBaseline = "hanging"
        ctx.fillText("Hello world",10,50);
      }else{}
    }
  </script>
</body>
</html>