canvas-multiline
Advanced tools
说明：canvas-multiline支持绘制文本时，按指定的最大宽度自动换行，并能解析文本中的"\n"换行符。同时，canvas-multiline支持对英文单词的宽度进行解析。
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script src="../dist/canvas-multiline.min.js"></script>
</body>
</html>
import 'canvas-multiline'
...
let ctx = canvas.getContext("2d");
ctx.font = "18px Arial";
ctx.textBaseline = "top";
let text = `Her voice was so sweet as it broke the hypnotic trance we were all caught in, "Mom, let's run through the rain." she said.`
ctx.strokeRect(0, 0, 160, 500)
ctx.fillMultilineText(text, 0, 0, 160);
let ctx = canvas.getContext("2d");
ctx.font = "18px Arial";
ctx.textBaseline = "top";
//文本中存在"\n"换行符
let text = `Her \nvoice \nwas so sweet as it broke the hypnotic trance we were all caught in, "Mom, let's run through the rain." she said.`
ctx.strokeRect(0, 0, 160, 500)
ctx.fillMultilineText(text, 0, 0, 160);
let ctx = canvas.getContext("2d");
ctx.font = "18px Arial";
ctx.textBaseline = "top";
//中文
let text = `生命没有意义，我来到这个世界上，只为了再一次聆听那曾被判决的声音，也许对你们来说，没有任何的意义，但对我来说，就是生命中最大的意义。`
ctx.strokeRect(0, 0, 160, 500)
ctx.fillMultilineText(text, 0, 0, 160);
说明：此方法通过指定type填充或描边文本。
| 参数 | 说明 | 默认值 |
|---|---|---|
| type | 可选值:'fill' | 'stroke'，fill填充文本,stroke描边文本 | - |
| text | 要绘制的文本 | - |
| x | 文本区域左上角x坐标 | - |
| y | 文本区域左上角y坐标 | - |
| maxWidth | 文本区域的最大宽度，若文本超过最大宽度，会自动换行 | - |
| verticalSpacingh | 文字竖直方向的间距 | 0 |
说明：此方法填充一个指定最大宽度的文本
| 参数 | 说明 | 默认值 |
|---|---|---|
| text | 要绘制的文本 | - |
| x | 文本区域左上角x坐标 | - |
| y | 文本区域左上角y坐标 | - |
| maxWidth | 文本区域的最大宽度，若文本超过最大宽度，会自动换行 | - |
| verticalSpacingh | 文字竖直方向的间距 | 0 |
说明：此方法描边一个指定最大宽度的文本
| 参数 | 说明 | 默认值 |
|---|---|---|
| text | 要绘制的文本 | - |
| x | 文本区域左上角x坐标 | - |
| y | 文本区域左上角y坐标 | - |
| maxWidth | 文本区域的最大宽度，若文本超过最大宽度，会自动换行 | - |
| verticalSpacingh | 文字竖直方向的间距 | 0 |
FAQs
为canvas ctx扩展多行文本的绘制，支持对英文单词的宽度进行的解析
The npm package canvas-multiline receives a total of 0 weekly downloads. As such, canvas-multiline popularity was classified as not popular.
We found that canvas-multiline demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
npm author Qix’s account was compromised, with malicious versions of popular packages like chalk-template, color-convert, and strip-ansi published.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.