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

Question

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

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

• 我将宽度从 css 更改为
• 我改变了javascripts的宽度
• 我从 javascript 文件更改和测试了很多东西，我在 css 文件和 javascript 之间做了很多组合

但是这一切都是错误的。 它破坏了我并混淆了我在 output 中的文本。当我从 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

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

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