Javascript 如何在画布中使用beginPath写信？

我想知道有没有画字母的资料？我不想使用fillText函数，因为我需要坐标在红色区域中进行操作。我想我应该使用现成的坐标来构建一个表，表中的坐标在字母内部和外部。你觉得我的步态对吗

我想建造这样的东西：用字母表中的所有字母

---

谢谢。

如果字母/文本的光栅坐标足够，即您不需要绘制每个图示符所需的实际矢量说明：

将文本填充到辅助画布/上下文中，例如白色或黑色 用鼠标抓取快照 取决于你到底在做什么， 从快照中随机采样像素， 或者对其进行一次迭代，以查找所有不透明像素，例如集合或数组 实例 根据OP，这里有一个完整的例子来说明我的意思

renderTextToPixelList测量字体并将其渲染到画布上，但不清除它。 一旦我们有了像素列表，我们就设置了一个间隔函数，从列表中随机选择一个像素，并用另一种颜色绘制它，因此我们最终会看到文本的动画出现并慢慢改变颜色。 异步函数加载字体{ const font=new fontfaceafa Slab One，url//db.onlinewebfonts.com/t/092d2fc4b6fd921ba340df3151fe4aa3.woff2； 等待字体加载； document.fonts.addfont； } 函数renderTextToPixelListfont、text、canvas、sampleStep=3{ const context=canvas.getContext2d； context.font=font； context.fillStyle=000； const measurements=context.measureTexttext； 常数宽度=Math.ceilmeasurements.width； 常数高度=Math.ceilmeasurements.ActualBoundingBoxAscend-Measures.ActualBoundingBoxDecend； context.fillTexttext，measures.actualBoundingBoxLeft，高度； const imageData=context.getImageData0，0，宽度，高度； 恒不透明像素=[]； 对于设y=0；y240{ 不透明像素。按[x，y]； } } } 返回{ 不透明像素， 宽度 身高 }; } 函数drawDotcontext，pmap{ const idx=Math.floorpmap.opaquePixels.length*Math.random； 设[x，y]=pmap.opaquePixels[idx]； x*=1.5； y*=1.5； 常量色调=x+5++新日期/150%360； context.beginPath； context.fillStyle=`hsla${hue}，100%，50%，0.5`； context.ellipsex-1，y-1，2，2，0，0，6.283； context.fill； } loadFonts.then=>{ const canvas=document.getElementByIdcanvas； const pmap=renderTextToPixelList100px阿尔法板一，您好，画布； canvas.width=canvas.width+0；//清除画布 const context=canvas.getContext2d； setInterval=>{ 对于变量i=0；i<5；i++drawDotcontext，pmap； }, 20; };

---

你可以在二次画布上画一个大的黑色字母，并使用它的图像数据来确定一个像素是否是字母的一部分；只需检查红色通道的值。您好，我被卡在字母的中心并拍摄了照片。我错过了什么？多谢各位@Jimmy.D我补充了一个完整的例子：谢谢你，我从你的指示开始，这里是我阻止的地方，我认为我的捕获getImageData不太顺利，我不明白为什么，我在屏幕上画了所有东西来帮助我。我完全不明白在循环中，找到偏移常量off的神奇值是什么。你能告诉我这件事吗关于off，由于imageData.data是高度x宽度x RGBA 4像素的数组，off=y*width*4+x*4是在x，y处获得R通道的公式；加上3，跳过G和B，得到A。我的示例已经绘制了x*=1.5的像素；y*=1.5；，i、 e.将原始文件放大50%。