前言

在上一篇文章 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><canvasid="canvas"width="450" height="450" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas><script>const canvas = document.getElementById('canvas'); // 获取Canvasconst 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><canvasid="canvas"width="450" height="450" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas><script>const canvas = document.getElementById('canvas'); // 获取Canvasconst ctx = canvas.getContext('2d'); // 获取绘制上下文// 设置字号为:30px 字体为:Arialctx.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><canvasid="canvas"width="450" height="450" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas><script>const canvas = document.getElementById('canvas'); // 获取Canvasconst ctx = canvas.getContext('2d'); // 获取绘制上下文// 设置字号为:30px 字体为:Arialctx.font = "30px Arial";// 在（50,50）的位置绘制一段文本ctx.strokeText("携手创作，共同成长，你好，掘金。", 50, 50);// 在（50,100）的位置绘制一段文本,并限制最大宽度为350ctx.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><canvasid="canvas"width="450" height="450" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas><script>const canvas = document.getElementById('canvas'); // 获取Canvasconst ctx = canvas.getContext('2d'); // 获取绘制上下文// 设置字号为:30px 字体为:Arialctx.font = "30px Arial";// 在（50,50）的位置绘制一段文本ctx.strokeText("携手创作，共同成长，你好，掘金。", 50, 50);// 在（50,100）的位置绘制一段文本,并限制最大宽度为350ctx.strokeText("携手创作，共同成长，你好，掘金。", 50, 100, 350);// 在（50,150）的位置以填充的方式绘制一段文本,并限制最大宽度为350ctx.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><canvasid="canvas"width="450" height="450" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas><script>const canvas = document.getElementById('canvas'); // 获取Canvasconst ctx = canvas.getContext('2d'); // 获取绘制上下文// 默认情况ctx.strokeText("携手创作，共同成长，你好，掘金。", 50, 50);ctx.fillText("携手创作，共同成长，你好，掘金。", 50, 100);// 设置字号为:20px 字体为:Arialctx.beginPath()ctx.font = "20px Arial"; ctx.strokeText("携手创作，共同成长，你好，掘金。", 50, 200);ctx.fillText("携手创作，共同成长，你好，掘金。", 50, 250);// 设置字号为:30px 字体为:Georgiactx.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><canvasid="canvas"width="450" height="450" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas><script>const canvas = document.getElementById('canvas'); // 获取Canvasconst ctx = canvas.getContext('2d'); // 获取绘制上下文// 设置字号为:20px 字体为:Arialctx.font = "20px Arial"; // 默认情况 startctx.fillText("携手创作，共同成长", 200, 50);// endctx.beginPath()ctx.textAlign = "end"; ctx.fillText("携手创作，共同成长", 200, 100);// leftctx.beginPath()ctx.textAlign = "left"; ctx.fillText("携手创作，共同成长", 200, 150);// rightctx.beginPath()ctx.textAlign = "right"; ctx.fillText("携手创作，共同成长", 200, 200);// centerctx.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><canvasid="canvas"width="450" height="450" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas><script>const canvas = document.getElementById('canvas'); // 获取Canvasconst ctx = canvas.getContext('2d'); // 获取绘制上下文// 设置字号为:20px 字体为:Arialctx.font = "20px Arial"; // 默认情况 inheritctx.fillText("携手创作，共同成长", 200, 50);// ltr：文本方向从左向右ctx.beginPath()ctx.direction = "ltr";ctx.fillText("携手创作，共同成长", 200, 100);// leftctx.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><canvasid="canvas"width="600" height="950" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas><script>const canvas = document.getElementById('canvas'); // 获取Canvasconst ctx = canvas.getContext('2d'); // 获取绘制上下文// 设置字号为:20px 字体为:Arialctx.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><canvasid="canvas"width="550" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas><script>const canvas = document.getElementById('canvas'); // 获取Canvasconst ctx = canvas.getContext('2d'); // 获取绘制上下文ctx.strokeStyle = 'red'; // 设置字体颜色ctx.font = "30px Arial"; // 设置字号为:30px 字体为:Arialconst 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><canvasid="canvas"width="550" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas><script>const canvas = document.getElementById('canvas'); // 获取Canvasconst ctx = canvas.getContext('2d'); // 获取绘制上下文ctx.font = "30px Arial"; // 设置字号为:30px 字体为:Arialctx.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><canvasid="canvas"width="550" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas><script>const canvas = document.getElementById('canvas'); // 获取Canvasconst ctx = canvas.getContext('2d'); // 获取绘制上下文var txt="携手创作，共同成长。123 Go!"ctx.font = "30px Arial"; // 设置字号为:30px 字体为:Arialctx.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><canvasid="canvas"width="550" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas><script>const canvas = document.getElementById('canvas'); // 获取Canvasconst 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><canvasid="canvas"width="550" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas><script>const canvas = document.getElementById('canvas'); // 获取Canvasconst 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><canvasid="canvas"width="550" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas><script>const canvas = document.getElementById('canvas'); // 获取Canvasconst 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基础【下篇】相关推荐

圆形界面开启相机_「基础篇三」手机摄影拍照界面详解
[基础篇三]手机摄影拍照界面详解手机拍照对我们来说已习以为常,每天我们都会用手机相机功能或多或少的拍出几张照片.故手机拍照界面对我们来说也不陌生,但手机拍照界面上的那些按钮,那些功能你都用过吗?你 ...
invader的java学习第三天基础篇
invader的java学习第三天基础篇一.整数的取值范围表类型名称数据类型所占空间表数范围字节型 byte 1字节 -128-127 短整型 short 2字节 +-3w(-2^15-2 ...
WF4.0 基础篇 (三十完) 对学习WF的一点建议
从09年10月份 NET4.0 Bata 2发布后,我就开始写[WF4.0 基础篇]这个系列,经历了5个多月终于在NET4.0正式发布前将这个系列完成了这段时间与一些对WF4.0感兴趣的公司与开发人 ...
H5：画布Canvas基础知识讲解（三）之文字、阴影、颜色渐变
上一节介绍了H5:画布Canvas基础知识讲解(二)之插入图像.像素级操作,接下来继续讲解H5:画布Canvas基础. 文字虽然最近的WebKit版本和Firefox 3.1 nightly bui ...
ASP.NET MVC学前篇之Ninject的初步了解
ASP.NET MVC学前篇之Ninject的初步了解 1.介绍废话几句,Ninject是一种轻量级的.基础.NET的一个开源IoC框架,在对于MVC框架的学习中会用到IoC框架的,因为这种IoC开 ...
Canvas基础-粒子动画Part2
紧接上一篇文章 Canvas基础-粒子动画Part1 其实这篇早在一个星期之前就应该发了,无奈事情太多,而且我又跑去写微信公众号了. 粒子动起来有了上一篇的基础,我们已经可以获得粒子,并将轮廓显示在 ...
人工智能之数学基础篇—高等数学基础（下篇）
人工智能之数学基础篇-高等数学基础(下篇) 6 方向导数 6.1 方向导数的定义 6.2 方向导数的几何意义 7 梯度 8 综合实例一梯度下降法求函数的最小值 9 Python中相关库简介 9.1 S ...
java负数右移_收入囊中篇---Java程序基础（二）
前言: 本篇是接着上一篇更新的,如果没有阅读上一篇的话,可以查阅或回顾一下. 1.收入囊中篇---Java基础必备知识(一) 2.收入囊中篇---Java程序基础(二) Java程序基础目录 1.Ja ...
好程序员分享24个canvas基础知识小结
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...

PixiJs学前篇（三）：Canvas基础【下篇】

前言

绘制文本

轮廓绘制：strokeText

语法：

参数：

填充绘制：fillText

语法：

参数：

文本样式

font

textAlign

direction

textBaseline

阴影

measureText

绘制图像

语法：

参数：

绘制图像

缩放图像

裁剪图像

PixiJs学前篇（三）：Canvas基础【下篇】相关推荐

最新文章

热门文章