如何调整带有动画文本的 canvas 的大小？

Question

大家晚上好我是这个网站的新手所以请原谅我所犯的任何错误。

我正在练习下面的一个项目，我想在末尾添加一个字母，如'N'或像'![=30=这样的符号]'。当前项目支持7个字母，我想再加一个，改成8个数字。我找不到这样做的方法。我尝试了很多事情，例如：

我将宽度从 css

我把宽度从 javascripts

我更改并测试了 javascript 文件中的很多东西，并且我在 css 文件和 javascript
之间做了很多组合

但这一切都是错误的。它宠坏了我并混淆了我输出的文本。当我更改 css 文件的宽度时，它会使 canvas 的文本变大，但不会在末尾添加一个字母。我必须更改什么才能在末尾添加一位数字？谢谢！

/** * Grab a shorthand for requestAnimationFrame */ const RAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function (cb) { setTimeout(cb, 1000 / 60) } const CANVAS_HEIGHT = 70 const CANVAS_WIDTH = 490 const BLOCK_SIZE = 10 let RATE_OF_CHANGE = 0.5 class Block { constructor({X, Y}, finalColor = '#111') { this.__CANVAS = document.createElement('canvas') this.__CANVAS.height = BLOCK_SIZE this.__CANVAS.width = BLOCK_SIZE this.__POSITION = { X, Y } this.__FINAL_COLOR = finalColor this.__COLOR = '#111' this.render() } render() { const context = this.__CANVAS.getContext('2d') context.clearRect(0, 0, BLOCK_SIZE, BLOCK_SIZE) context.fillStyle = this.__COLOR context.fillRect(0, 0, BLOCK_SIZE, BLOCK_SIZE) } update(lastUpdate) { if (lastUpdate) { this.__UPDATED = true this.__COLOR = this.__FINAL_COLOR } else { this.__COLOR = `#${Math.floor(Math.random() * 16777215).toString(16)}` } this.render() } } class ColorWall { constructor({height, width, matrix}) { this.__CANVAS = document.createElement('canvas') this.__CANVAS.height = height this.__CANVAS.width = width this.__MATRIX = matrix this.__POOL = [] this.__FRAME_COUNT = 0 } generateImage() { const { __CANVAS } = this const { height, width, } = __CANVAS this.__FRAME_COUNT = this.__FRAME_COUNT + 1 const CONTEXT = __CANVAS.getContext('2d') const HEIGHT_LIMIT = Math.floor(height / BLOCK_SIZE) const WIDTH_LIMIT = Math.floor(width / BLOCK_SIZE) const TOTAL = HEIGHT_LIMIT * WIDTH_LIMIT const generateCoordinates = (i) => { const X = (i % WIDTH_LIMIT) * BLOCK_SIZE const Y = Math.floor((i / WIDTH_LIMIT)) * BLOCK_SIZE /* For the debugzzz */ // console.info(`I: ${i} , X: ${X} , Y: ${Y}`) return { X, Y, } } if (this.__POOL.length === 0) { for (let i = 0; i < TOTAL; i++) { const coordinates = generateCoordinates(i) const myBlock = new Block(coordinates) this.__POOL.push(myBlock) } } for (const idx in this.__POOL) { const block = this.__POOL[idx] if (!block.__UPDATED && this.__FRAME_COUNT > 0 && this.__FRAME_COUNT === parseInt(this.__MATRIX[idx], 10)) { block.update(true) } else if (!block.__UPDATED && Math.random() > RATE_OF_CHANGE) { block.update() } CONTEXT.drawImage(block.__CANVAS, block.__POSITION.X, block.__POSITION.Y) } return __CANVAS } } /** * This is the actual canvas. */ const $canvas = document.querySelector('canvas') $canvas.height = CANVAS_HEIGHT $canvas.width = CANVAS_WIDTH const $context = $canvas.getContext('2d') $context.save() /** * As blocks have a delay on being drawn in, make the frame delay greater * the total frames to draw the wall. (6 * 42). Say start at 300? */ let FRAME_MATRIX = [ [ [0, 0, 0, 0, 0, 0, 0], [0, 54, 53, 52, 51, 50, 0], [0, 55, 0, 0, 0, 0, 0], [0, 56, 0, 0, 0, 0, 0], [0, 57, 0, 0, 0, 0, 0], [0, 58, 59, 60, 61, 62, 0], [0, 0, 0, 0, 0, 0, 0], ], [ [0, 0, 0, 0, 0, 0, 0], [0, 68, 67, 66, 65, 64, 0], [0, 69, 0, 0, 0, 79, 0], [0, 70, 0, 0, 0, 78, 0], [0, 71, 0, 0, 0, 77, 0], [0, 72, 73, 74, 75, 76, 0], [0, 0, 0, 0, 0, 0, 0], ], [ [0, 0, 0, 0, 0, 0, 0], [0, 80, 81, 82, 83, 84, 0], [0, 0, 93, 0, 0, 85, 0], [0, 0, 94, 0, 0, 86, 0], [0, 0, 95, 0, 0, 87, 0], [0, 92, 91, 90, 89, 88, 0], [0, 0, 0, 0, 0, 0, 0], ], [ [0, 0, 0, 0, 0, 0, 0], [0, 100, 99, 98, 97, 96, 0], [0, 101, 0, 0, 0, 0, 0], [0, 102, 109, 110, 111, 0, 0], [0, 103, 0, 0, 0, 0, 0], [0, 104, 105, 106, 107, 108, 0], [0, 0, 0, 0, 0, 0, 0], ], [ [0, 0, 0, 0, 0, 0, 0], [0, 112, 113, 114, 115, 116, 0], [0, 123, 0, 0, 0, 117, 0], [0, 122, 121, 120, 119, 118, 0], [0, 124, 0, 0, 0, 0, 0], [0, 125, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], ], [ [0, 0, 0, 0, 0, 0, 0], [0, 130, 129, 128, 127, 126, 0], [0, 131, 0, 0, 0, 0, 0], [0, 132, 139, 140, 141, 0, 0], [0, 133, 0, 0, 0, 0, 0], [0, 134, 135, 136, 137, 138, 0], [0, 0, 0, 0, 0, 0, 0], ], [ [0, 0, 0, 0, 0, 0, 0], [0, 146, 0, 0, 0, 154, 0], [0, 145, 147, 0, 0, 153, 0], [0, 144, 0, 148, 0, 152, 0], [0, 143, 0, 0, 149, 151, 0], [0, 142, 0, 0, 0, 150, 0], [0, 0, 0, 0, 0, 0, 0], ], ] /** * Resort and flatten the array to feed into the color wall */ let sorted = [] for(let i = 0; i < FRAME_MATRIX.length; i++) { for (let b = 0; b < FRAME_MATRIX[i].length; b++) { if (!sorted[b]) sorted[b] = [] sorted[b].push(FRAME_MATRIX[i][b]) } } sorted = sorted.join().split(',') const render = () => { $context.clearRect(0, 0, $canvas.width, $canvas.height) if (!$canvas.__COLORWALL) { $canvas.__COLORWALL = new ColorWall({ height: CANVAS_HEIGHT, width: CANVAS_WIDTH, matrix: sorted }) } $context.drawImage($canvas.__COLORWALL.generateImage(), 0, 0) /** * Uncomment to get an idea of the current FPS */ // console.info(new Date().toUTCString()) $context.restore() RAF(render) } RAF(render)

Answer 1

每个字符的宽度为70，总宽度在变量中指定CANVAS_WIDTH:

const CANVAS_WIDTH = 490

因此，您需要将此变量的值再增加 70。结果将是这样的：

const CANVAS_WIDTH = 560

您文本中的字母通过矩阵 FRAME_MATRIX 数组传递。

let FRAME_MATRIX = [ ... ]

因此，在矩阵中再增加一个字母的元素。

这是矩阵形式的字母N的例子。只需玩弄这些值，您就会得到您想要的角色：

[
    [0, 0, 0, 0, 0, 0, 0],
    [0, 146, 0, 0, 0, 154, 0],
    [0, 145, 147, 0, 0, 153, 0],
    [0, 144, 0, 148, 0, 152, 0],
    [0, 143, 0, 0, 149, 151, 0],
    [0, 142, 0, 0, 0, 150, 0],
    [0, 0, 0, 0, 0, 0, 0],
]

Answer 2

我没有发现代码中有任何错误...因此，如果您执行以下操作，您将能够轻松添加一个字母或任意数量的字母。

将 CANVAS_WIDTH 更改为 70 的下一个倍数。就像 Currently you have 7 letters 所以它是 490 但如果你想要另一个让它成为 560 8 个字母。
您还需要添加您要添加的字母的附加矩阵。就像为 N 添加矩阵会给你最后一个字母 N

如何调整带有动画文本的 canvas 的大小？

How to resize canvas with Animated Text on it?

javascript

babeljs