[英]How to resize canvas with Animated Text on it?
Good evening everyone I am new to this site so forgive me for any mistake I have made.大家晚上好,我是这个网站的新手,所以请原谅我犯的任何错误。
I am practice a project below and I want to add one more letter at the end like ' N ' or symbol like ' !我正在练习下面的一个项目,我想在末尾再添加一个字母,如“ N ”或“符号” ! '. '. Currrent project supported 7 letters and I want to add one more, change to 8 digits.当前项目支持7个字母,我想再加一个,改成8个数字。 I cannot find the way to do this.我找不到这样做的方法。 I tried a lot of things like:我尝试了很多事情,例如:
But all of this is wrong.但是这一切都是错误的。 It spoils me and confuses my text in output. When I cahnge the width from css file it makes the canvas with the text bigger but not the size to add one more letter at the end.它破坏了我并混淆了我在 output 中的文本。当我从 css 文件中调整宽度时,它使 canvas 的文本更大但不是在末尾添加一个字母的大小。 What must i change to add one more digit at the end?我必须更改什么才能在末尾添加一位数字? Thank you!谢谢!
/** * 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)
Each character has a width of 70, and the total width is specified in variable CANVAS_WIDTH
:每个字符的宽度为 70,总宽度在变量CANVAS_WIDTH
中指定:
const CANVAS_WIDTH = 490
Accordingly, you need to increase the value of this variable by another 70. And as a result it will be like this:因此,您需要将此变量的值再增加 70。结果将是这样的:
const CANVAS_WIDTH = 560
The letters in your text are passed in array FRAME_MATRIX
with a matrix.文本中的字母在带有矩阵的数组FRAME_MATRIX
中传递。
let FRAME_MATRIX = [ ... ]
Therefore, add one more element of the letter in the matrix.因此,在矩阵中再增加一个字母元素。
This is an example of the letter N in the form of a matrix.这是矩阵形式的字母N的示例。 Just play around with these values and you will get the character you want:只要玩弄这些值,你就会得到你想要的角色:
[
[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],
]
I Dont Find Any Mistakes In The Code... So If You Do The Following You Will Be Able To Add A Letter Or Any No of Letters Easily.我没有在代码中发现任何错误...因此,如果您执行以下操作,您将能够轻松添加一个字母或任何字母。
CANVAS_WIDTH
to the next multiple of 70
.将CANVAS_WIDTH
更改为70
的下一个倍数。 Like Currently you have 7
letters so it is 490
but if you want another make it 560
for 8 letters.就像目前你有7
个字母,所以它是490
,但如果你想要另一个,让它成为560
个 8 个字母。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.