本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！

大家好我是ndz，很高兴也很荣幸成为了一名稀土掘金技术社区签约作者，在这里真的很感谢平台给予的肯定和各位读者的支持，感谢 🙏 🙏 🙏。

本文为稀土掘金技术社区签约作者专栏 - 《从Canvas到PixiJs》的第四篇文章，喜欢的小伙伴记得点赞加关注，以防需要用时回来不迷路 😂

前言

在上一篇文章 PixiJs学前篇（二）：Canvas基础【中篇】🔥🔥 中我们了解了Canvas的基本绘制形状，接下来我们看一下如何在 Canvas 中绘制文本。

绘制文本

文本的绘制也是 Canvas 中也是比较常见的，在 Canvas 的绘制中，其实除了图片的绘制基本就是文字的绘制，两者基本五五开，下面我们开始看一下文本是如何让绘制的。

文本的绘制和基本形状的绘制一样，分为描边和填充两种，下面我们分别看一下效果

轮廓绘制：strokeText

strokeText()方法是以描边的方式绘制文字的

语法：

ctx.strokeText(txt, x, y, maxWidth)

参数：

txt：是绘制的文本内容
x、y：为绘制文本的起始位置坐标
maxWidth：可选参数，为文本绘制的最大宽度。

下面举个例子看一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 文本</title>
</head>
<body>
  <canvas
    id="canvas"
    width="450" 
    height="450" 
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    const canvas = document.getElementById('canvas'); // 获取Canvas
    const ctx = canvas.getContext('2d'); // 获取绘制上下文
     // 在（50,50）的位置绘制一段文本“掘金你好”
    ctx.strokeText("携手创作，共同成长，你好，掘金。", 50, 50);
  </script>
</body>
</html>

效果如下

如图我们看到，效果和我们预想的似乎并不一致，说好的描边，怎么感觉是“实心”的。其实这是文本绘制使用的是默认的字号和字体，导致看起来与预期的结果不太一致，这边我们设置一下字号和字体，再看一下效果

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 文本</title>
</head>
<body>
  <canvas
    id="canvas"
    width="450" 
    height="450" 
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    const canvas = document.getElementById('canvas'); // 获取Canvas
    const ctx = canvas.getContext('2d'); // 获取绘制上下文
    
    // 设置字号为:30px 字体为:Arial
    ctx.font = "30px Arial";

    // 在（50,50）的位置绘制一段文本
    ctx.strokeText("携手创作，共同成长，你好，掘金。", 50, 50);
  </script>
</body>
</html>

效果如下：

如图，效果就很明显是，是按文字的轮廓来绘制，但又有一个问题，咱们的文字超出了画布本身，那么咱们可用可续那参数: 最大宽度来限制一下看看是什么效果：代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 文本</title>
</head>
<body>
  <canvas
    id="canvas"
    width="450" 
    height="450" 
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    const canvas = document.getElementById('canvas'); // 获取Canvas
    const ctx = canvas.getContext('2d'); // 获取绘制上下文

    // 设置字号为:30px 字体为:Arial
    ctx.font = "30px Arial";

    // 在（50,50）的位置绘制一段文本
    ctx.strokeText("携手创作，共同成长，你好，掘金。", 50, 50);

    // 在（50,100）的位置绘制一段文本,并限制最大宽度为350
    ctx.strokeText("携手创作，共同成长，你好，掘金。", 50, 100, 350);
  </script>
</body>
</html>

效果如下：

如图我们可以看出，文案的长度被限制到了画布中，这里需要我们注意的是当文案大于最大宽度时不是裁剪或者换行，而是缩小。

填充绘制：fillText

fillText()方法是以填充的方式绘制文字的

语法：

ctx.fillText(txt, x, y, maxWidth)

参数：

txt：是绘制的文本内容
x、y：为绘制文本的起始位置坐标
maxWidth：可选参数，为文本绘制的最大宽度。

下面举个例子看一下fillText()和 strokeText()方法的区别。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 文本</title>
</head>
<body>
  <canvas
    id="canvas"
    width="450" 
    height="450" 
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    const canvas = document.getElementById('canvas'); // 获取Canvas
    const ctx = canvas.getContext('2d'); // 获取绘制上下文

    // 设置字号为:30px 字体为:Arial
    ctx.font = "30px Arial";

    // 在（50,50）的位置绘制一段文本
    ctx.strokeText("携手创作，共同成长，你好，掘金。", 50, 50);

    // 在（50,100）的位置绘制一段文本,并限制最大宽度为350
    ctx.strokeText("携手创作，共同成长，你好，掘金。", 50, 100, 350);

     // 在（50,150）的位置以填充的方式绘制一段文本,并限制最大宽度为350
     ctx.fillText("携手创作，共同成长，你好，掘金。", 50, 150, 350);


  </script>
</body>
</html>

效果如下：

如图我们可以明显看出fillText()和 strokeText()方法绘制的区别。在之后的实践中我们可以按需求来选择用什么方式来绘制文本。

上面的例子中我们说道了一个属性：font，我们通过它设置了文本的样式，下面我们统一说一下在文本的绘制中，究竟有哪些文本样式可以设置。

文本样式

在文本的绘制中，样式的设置是不可或缺的，下面我们来看看究竟有哪些样式可以让我们的文本更加丰富多彩。

font

font属性的设置可以改变字号和字体，不设置的情况下默认是：10px sans-serif。

举个例子看一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 文本</title>
</head>
<body>
  <canvas
    id="canvas"
    width="450" 
    height="450" 
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    const canvas = document.getElementById('canvas'); // 获取Canvas
    const ctx = canvas.getContext('2d'); // 获取绘制上下文

    // 默认情况
    ctx.strokeText("携手创作，共同成长，你好，掘金。", 50, 50);
    ctx.fillText("携手创作，共同成长，你好，掘金。", 50, 100);

    // 设置字号为:20px 字体为:Arial
    ctx.beginPath()
    ctx.font = "20px Arial"; 
    ctx.strokeText("携手创作，共同成长，你好，掘金。", 50, 200);
    ctx.fillText("携手创作，共同成长，你好，掘金。", 50, 250);

    // 设置字号为:30px 字体为:Georgia
    ctx.beginPath()
    ctx.font = "30px Georgia"; 
    ctx.strokeText("携手创作，共同成长", 50, 350);
    ctx.fillText("携手创作，共同成长", 50, 400);


  </script>
</body>
</html>

效果如下：

textAlign

textAlign属性的设置可以改变文本对齐的方式。默认值是 start，可选值有：left、right、center、start和end。

举个例子看一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 文本</title>
</head>
<body>
  <canvas
    id="canvas"
    width="450" 
    height="450" 
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    const canvas = document.getElementById('canvas'); // 获取Canvas
    const ctx = canvas.getContext('2d'); // 获取绘制上下文

    // 设置字号为:20px 字体为:Arial
    ctx.font = "20px Arial"; 

    // 默认情况 start
    ctx.fillText("携手创作，共同成长", 200, 50);

    // end
    ctx.beginPath()
    ctx.textAlign = "end"; 
    ctx.fillText("携手创作，共同成长", 200, 100);

    // left
    ctx.beginPath()
    ctx.textAlign = "left"; 
    ctx.fillText("携手创作，共同成长", 200, 150);

    // right
    ctx.beginPath()
    ctx.textAlign = "right"; 
    ctx.fillText("携手创作，共同成长", 200, 200);

    // center
    ctx.beginPath()
    ctx.textAlign = "center"; 
    ctx.fillText("携手创作，共同成长", 200, 250);


  </script>
</body>
</html>

效果如下：

如图我们可以看到各个参数对应的效果，我们会发现start和left的效果基本一样，还有end和right的效果也基本一样，那么start和left，end和right是不是等价的呢？答案肯定是否定的。因为如果是等价的那就没必要设置两个属性了。

那他们既然不一样，那他们有什么区别呢？这我们需要结合另一个属性：direction 来看。

direction

direction属性可以设置文本的方向。默认值是 inherit，可选值为：ltr（文本方向从左向右）、rtl（文本方向从右向左）、inherit（根据情况继承 Canvas元素或者 Document 。）。

下面我们先举个例子看一下 direction属性的各个值得效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 文本</title>
</head>
<body>
  <canvas
    id="canvas"
    width="450" 
    height="450" 
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    const canvas = document.getElementById('canvas'); // 获取Canvas
    const ctx = canvas.getContext('2d'); // 获取绘制上下文

    // 设置字号为:20px 字体为:Arial
    ctx.font = "20px Arial"; 

    // 默认情况 inherit
    ctx.fillText("携手创作，共同成长", 200, 50);

     // ltr：文本方向从左向右
    ctx.beginPath()
    ctx.direction = "ltr";
    ctx.fillText("携手创作，共同成长", 200, 100);

    // left
    ctx.beginPath()
    ctx.direction = "rtl"; 
    ctx.fillText("携手创作，共同成长", 200, 150);


  </script>
</body>
</html>

效果如下：

了解了direction属性以后我们再来看看上面说到的textAlign属性的值start和left，end和right的区别。

举个例子看一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 文本</title>
</head>
<body>
  <canvas
    id="canvas"
    width="600" 
    height="950" 
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    const canvas = document.getElementById('canvas'); // 获取Canvas
    const ctx = canvas.getContext('2d'); // 获取绘制上下文

    // 设置字号为:20px 字体为:Arial
    ctx.font = "18px Arial"; 

    ctx.textAlign = "start"; // 起点对齐
    ctx.fillText("携手创作，共同成长 -> start", 300, 50);
    ctx.textAlign = "end"; // 结尾对齐
    ctx.fillText("携手创作，共同成长 -> end", 300, 100);
    ctx.textAlign = "left"; // 左对齐
    ctx.fillText("携手创作，共同成长 -> left", 300, 150);
    ctx.textAlign = "right"; // 右对齐
    ctx.fillText("携手创作，共同成长 -> right", 300, 200);
    ctx.textAlign = "center"; // 居中对齐
    ctx.fillText("携手创作，共同成长 -> center", 300, 250);


    // ltr: 文本方向从左向右
    ctx.beginPath()
    ctx.direction = "ltr"; 

    ctx.textAlign = "start"; // 起点对齐
    ctx.fillText("携手创作，共同成长 -> ltr - start", 300, 350);
    ctx.textAlign = "end"; // 结尾对齐
    ctx.fillText("携手创作，共同成长 -> ltr - end", 300, 400);
    ctx.textAlign = "left"; // 左对齐
    ctx.fillText("携手创作，共同成长 -> ltr - left", 300, 450);
    ctx.textAlign = "right"; // 右对齐
    ctx.fillText("携手创作，共同成长 -> ltr - right", 300, 500);
    ctx.textAlign = "center"; // 居中对齐
    ctx.fillText("携手创作，共同成长 -> ltr - center", 300, 550);


    // 文本方向从左向右
    ctx.beginPath()
    ctx.direction = "rtl"; 

    ctx.textAlign = "start"; // 起点对齐
    ctx.fillText("携手创作，共同成长 -> rtl - start", 300, 650);
    ctx.textAlign = "end"; // 结尾对齐
    ctx.fillText("携手创作，共同成长 -> rtl - end", 300, 700);
    ctx.textAlign = "left"; // 左对齐
    ctx.fillText("携手创作，共同成长 -> rtl - left", 300, 750);
    ctx.textAlign = "right"; // 右对齐
    ctx.fillText("携手创作，共同成长 -> rtl - right", 300, 800);
    ctx.textAlign = "center"; // 居中对齐
    ctx.fillText("携手创作，共同成长 -> rtl - center", 300, 850);

  </script>
</body>
</html>

效果如下：

如图我们可以发现， direction 属性会对 textAlign 属性产生影响。

如果 direction 属性设置为 ltr，则textAlign属性的 left 和 start 的效果相同，right 和 end 的效果相同，

如果 direction 属性设置为 rtl，则 textAlign属性的 left 和 end 的效果相同，right 和 start 的效果相同。

textBaseline

textBaseline属性设置基于基线对齐的文字垂直方向的对齐方式。默认值是alphabetic，可选值为：top、hanging、middle、alphabetic、ideographic和bottom。

举个例子看一下不同属性值的样式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 文本</title>
</head>
<body>
  <canvas
    id="canvas"
    width="550" 
    height="500" 
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    const canvas = document.getElementById('canvas'); // 获取Canvas
    const ctx = canvas.getContext('2d'); // 获取绘制上下文

    ctx.strokeStyle = 'red'; // 设置字体颜色
    ctx.font = "30px Arial"; // 设置字号为:30px 字体为:Arial
    
    const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
      baselines.forEach(function (baseline, index) {
        ctx.textBaseline = baseline;
        let y = 60 + index * 60;
        ctx.beginPath();
        ctx.moveTo(10, y + 0.5);
        ctx.lineTo(500, y + 0.5);
        ctx.stroke();
        ctx.fillText('Hi, Welcome to my world! (' + baseline + ')', 10, y);
      });


  </script>
</body>
</html>

效果如下：

阴影

文字设置阴影是文字绘制中常见的一种使用，绘制上阴影会让字体看起来更加立体。

Canvas中可以通过四个属性来设置阴影效果，下面我们看看这四个效果各自具体的效果。

shadowOffsetX

shadowOffsetX属性用于设置阴影在 X轴上的延伸距离，默认值为0，如设置为10，则表示延 X轴向右延伸10像素的阴影，也可以为负值，负值表示阴影会往反方向（向左）延伸。

shadowOffsetY

shadowOffsetY属性用于设置阴影在 Y轴上的延伸距离，默认值为0，如设置为10，则表示延 Y轴向下延伸10像素的阴影，也可以为负值，负值表示阴影会往反方向（向上）延伸。

shadowBlur

shadowBlur属性用于设置阴影的模糊程度，默认为 0。

shadowColor

shadowColor属性用于设置阴影的颜色，默认为全透明的黑色。

举个例子看一下上面四个属性的效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 文本</title>
</head>
<body>
  <canvas
    id="canvas"
    width="550" 
    height="500" 
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    const canvas = document.getElementById('canvas'); // 获取Canvas
    const ctx = canvas.getContext('2d'); // 获取绘制上下文

    ctx.font = "30px Arial"; // 设置字号为:30px 字体为:Arial

    ctx.shadowColor = "#cccccc"; // 设置阴影的颜色
    ctx.shadowOffsetX = 10; // 设置X轴上的阴影
    ctx.shadowOffsetY = 10; // 设置Y轴上的阴影
    ctx.shadowBlur = 10; // 设置阴影的模糊程度
    ctx.fillText("携手创作，共同成长 !", 50, 50);

    ctx.beginPath()
    ctx.shadowBlur = 5; // 设置阴影的模糊程度
    ctx.fillText("携手创作，共同成长 !", 50, 100);

    ctx.beginPath()
    ctx.shadowOffsetX = 30; // 设置X轴上的阴影
    ctx.shadowOffsetY = 30; // 设置Y轴上的阴影
    ctx.fillText("携手创作，共同成长 !", 50, 150);


    ctx.beginPath()
    ctx.shadowOffsetX = -10; // 设置X轴上的阴影
    ctx.shadowOffsetY = -10; // 设置Y轴上的阴影
    ctx.fillText("携手创作，共同成长 !", 50, 250);

  </script>
</body>
</html>

效果如下：

measureText

measureText这个对象有很多属性，其中width属性用于基于当前上下文字号和字体来计算内联字符串的宽度。

我们看一下具体的用法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 文本</title>
</head>
<body>
  <canvas
    id="canvas"
    width="550" 
    height="500" 
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    const canvas = document.getElementById('canvas'); // 获取Canvas
    const ctx = canvas.getContext('2d'); // 获取绘制上下文

    var txt="携手创作，共同成长。123 Go!"

    ctx.font = "30px Arial"; // 设置字号为:30px 字体为:Arial
    ctx.fillText(txt, 50, 50);
    ctx.fillText("字体宽度:" + ctx.measureText(txt).width,50,100)

    ctx.beginPath()
    ctx.font="30px Georgia";
    ctx.fillText(txt, 50, 200);
    ctx.fillText("字体宽度:" + ctx.measureText(txt).width, 50, 250)

    ctx.beginPath()
    ctx.font="30px Verdana";
    ctx.fillText(txt, 50, 350);
    ctx.fillText("字体宽度:" + ctx.measureText(txt).width, 50, 400)

  </script>
</body>
</html>

效果如下：

如图可以看出，相同的文本，在不同的字体时，文字的大小是不一样的，在我们的案例中（专栏开始说的案例），涉及到文本的修改，在修改的时候其实就涉及到需要测量文本的宽度去修改编辑框的宽度，因为 Canvas 绘制的文本是不可编辑的，所以编辑的时候需要用DOM做一个假的编辑框覆盖在 Canvas 绘制的文案上面，编辑的时候就根据DOM中文字的内容来通过上述案例计算宽度，再渲染 Canvas 上的文本。

measureText对象还有很多属性，但兼容性都不是很好，且这些属性都是只读属性，下面列一下。

TextMetrics.actualBoundingBoxLeft：从 textAlign 属性确定的对齐点到文本矩形边界左侧的距离，使用 CSS 像素计算；正值表示文本矩形边界左侧在该对齐点的左侧。
TextMetrics.actualBoundingBoxRight：从 textAlign 属性确定的对齐点到文本矩形边界右侧的距离。
TextMetrics.fontBoundingBoxAscent：从 textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离。
TextMetrics.fontBoundingBoxDescent：从 textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离。
TextMetrics.actualBoundingBoxAscent：从 textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离。
TextMetrics.actualBoundingBoxDescent：从 textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离。
TextMetrics.emHeightAscent：从 textBaseline 属性标明的水平线到线框中 em 方块顶部的距离。
TextMetrics.emHeightDescent：从 textBaseline 属性标明的水平线到线框中 em 方块底部的距离。
TextMetrics.hangingBaseline：从 textBaseline 属性标明的水平线到线框的 hanging 基线的距离。
TextMetrics.alphabeticBaseline：从 textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离。
TextMetrics.ideographicBaseline：从 textBaseline 属性标明的水平线到线框的 ideographic 基线的距离。

注意：measureText对象上的这些属性，都是使用 CSS 像素计算的，且都是只读属性。

绘制图像

上面我们说了文字的绘制，下面我们介绍一下图像的绘制。

如何把图片绘制到 Canvas 中，在上一篇文章 PixiJs学前篇（二）：Canvas基础【中篇】中，我们介绍的图像样式可以通过 createPattern 方法把图片绘制到Canvas中。

现在我们介绍一个专门用于把图片绘制到 Canvas 中的方法： drawImage，并且 drawImage方法会根据不同的传参实现不同的功能：绘制图像、缩放图像、裁剪图像。

语法：

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

参数：

image：绘制的元素（图像）。
sx、sy：裁剪框左上角的坐标。
sWidth、sHeight：裁剪框的宽度和高度。
dx、dy：绘制元素（图像）时左上角的坐标。
dWidth、dHeight：绘制元素（图像）的宽度和高度。如果不设置，则在绘制时image宽度和高度不会缩放。

下面我们分别看看传不同的参数如何实现不同的功能。以下面这张图片作为元素绘制：

绘制图像

单纯的图片绘制只需要image、dx和dy三个参数。举个例子看一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 图像绘制</title>
</head>
<body>
  <canvas
    id="canvas"
    width="550" 
    height="500" 
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    const canvas = document.getElementById('canvas'); // 获取Canvas
    const ctx = canvas.getContext('2d'); // 获取绘制上下文

    var img = new Image();
    img.src = 'https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9f56ebb2a6674e1fbd55a3d92df042bd~tplv-k3u1fbpfcp-watermark.image';
    img.onload = function(){
      ctx.drawImage(img, 0, 0);
    }
  </script>
</body>
</html>

效果如下：

如图元素已经绘制到 Canvas 中，但可以看到图片绘制并不完整。那么想完整的绘制这张图片我们就需要在缩放图片。如何缩放呢？看下面的例子

缩放图像

想缩放图片就需要在绘制的前提下再设置图片的宽高，也就还需要dWidth和dHeight这两个参数。

举个例子看一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 图像绘制</title>
</head>
<body>
  <canvas
    id="canvas"
    width="550" 
    height="500" 
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    const canvas = document.getElementById('canvas'); // 获取Canvas
    const ctx = canvas.getContext('2d'); // 获取绘制上下文

    var img = new Image();
    img.src = 'https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9f56ebb2a6674e1fbd55a3d92df042bd~tplv-k3u1fbpfcp-watermark.image';
    img.onload = function(){
      ctx.drawImage(img, 0, 0, 550, 500);
    }
  </script>
</body>
</html>

效果如下：

如图元素已经整个的绘制到 Canvas 中了，那如果我们只需要把图片中的人物绘制到 Canvas 中，那么我们就需要对图片进行裁剪。那如何裁剪呢？

裁剪图像

想裁剪图片就需要在缩放的前提下再设置图片要显示的位置和裁剪的大小，也就还需要sx、sy、sWidth和sHeight这四个参数。

举个例子看一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 图像绘制</title>
</head>
<body>
  <canvas
    id="canvas"
    width="550" 
    height="500" 
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    const canvas = document.getElementById('canvas'); // 获取Canvas
    const ctx = canvas.getContext('2d'); // 获取绘制上下文

    var img = new Image();
    img.src = 'https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9f56ebb2a6674e1fbd55a3d92df042bd~tplv-k3u1fbpfcp-watermark.image';
    img.onload = function(){
      ctx.drawImage(img, 0, 150, 1650, 700, 0, 0, 550, 500);
    }
  </script>
</body>
</html>

效果如下：

综上所述，我们可以通过给 drawImage 方法传不同的参数来实现不同的内容。

PixiJs学前篇（三）：Canvas基础【文字篇】🔥🔥

前言

绘制文本

轮廓绘制：strokeText

语法：

参数：

填充绘制：fillText

语法：

参数：

文本样式

font

textAlign

direction

textBaseline

阴影

shadowOffsetX

shadowOffsetY

shadowBlur

shadowColor

measureText

绘制图像

语法：

参数：

绘制图像

缩放图像

裁剪图像