gpt4 book ai didi

javascript - 编写效果Javascript

转载 作者:行者123 更新时间:2023-12-01 03:07:38 25 4
gpt4 key购买 nike

我正在使用此页面的代码 ( https://www.codementor.io/epistemex/how-to-make-a-write-on-effect-using-html5-canvas-and-javascript-only-du107si9v )。给定一个字符串,它会创建一个逐字母写入字符串的效果。

这是我正在使用的代码:

function setup(txt, fill){
// get 2D context
$('body').append("<canvas id = 'newWord' width='1000' height=800></canvas>");
$("#newWord").css("position","absolute");
$("#newWord").css("top","300px");
$("#newWord").css("left","700px");
$("#newWord").css("overflow","visible");
var ctx = document.querySelector("#newWord").getContext("2d"),

// dash-length for off-range
dashLen = 200,

// we'll update this, initialize
dashOffset = dashLen,

// some arbitrary speed
speed = 20,

// the text we will draw
//txt = "TEST",

// start position for x and iterator
x = 50, i = 0,z = 0; w = 0;

// Comic Sans?? Let's make it useful for something ;) w/ fallbacks
ctx.font = "80pt Impact";

// thickness of the line
ctx.lineWidth = 10;


// to avoid spikes we can join each line with a round joint
//ctx.lineJoin = "round";

// increase realism letting background (f.ex. paper) show through
ctx.globalAlpha = 1;

// some color, lets use a black pencil
ctx.strokeStyle = "yellow";
ctx.fillStyle = fill;

(function loop() {
// clear canvas for each frame
ctx.clearRect(x, 0, '100%', '100%');

// calculate and set current line-dash for this char
ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]);

// reduce length of off-dash
dashOffset -= speed;

// draw char to canvas with current dash-length
ctx.strokeText(txt[i], x, 90);

// char done? no, the loop
if (dashOffset > 0) requestAnimationFrame(loop);

else {

// ok, outline done, lets fill its interior before next
ctx.fillText(txt[i], x, 90);

// reset line-dash length
dashOffset = dashLen;

// get x position to next char by measuring what we have drawn
// notice we offset it a little by random to increase realism
x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();

// lets use an absolute transform to randomize y-position a little
ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random());

// and just cause we can, rotate it a little too to make it even
// more realistic
ctx.rotate(Math.random() * 0.005);

// if we still have chars left, loop animation again for this char
if (i < txt.length) requestAnimationFrame(loop);
}
})(); // just to self-invoke the loop
};

效果非常好。但我需要同时写这些信。我可以修改什么?

谢谢

最佳答案

试试这个代码

function setup(txt, fill){
// get 2D context
$('body').append("<canvas id = 'newWord' width='1000' height=800></canvas>");
$("#newWord").css("position","absolute");
$("#newWord").css("top","300px");
$("#newWord").css("left","700px");
$("#newWord").css("overflow","visible");
var ctx = document.querySelector("#newWord").getContext("2d"),

// dash-length for off-range
dashLen = 200,

// we'll update this, initialize
dashOffset = dashLen,

// some arbitrary speed
speed = 20,

// the text we will draw
//txt = "TEST",

// start position for x and iterator
x = 50, i = 0,z = 0; w = 0;

// Comic Sans?? Let's make it useful for something ;) w/ fallbacks
ctx.font = "80pt Impact";

// thickness of the line
ctx.lineWidth = 10;


// to avoid spikes we can join each line with a round joint
//ctx.lineJoin = "round";

// increase realism letting background (f.ex. paper) show through
ctx.globalAlpha = 1;

// some color, lets use a black pencil
ctx.strokeStyle = "yellow";
ctx.fillStyle = fill;

(function loop() {
// clear canvas for each frame
ctx.clearRect(x, 0, '100%', '100%');

// calculate and set current line-dash for this char
ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]);

// reduce length of off-dash
dashOffset -= speed;

// draw char to canvas with current dash-length
ctx.strokeText(txt, x, 90);

// char done? no, the loop
if (dashOffset > 0) requestAnimationFrame(loop);

else {

// ok, outline done, lets fill its interior before next
ctx.fillText(txt, x, 90);

// reset line-dash length
dashOffset = dashLen;

// get x position to next char by measuring what we have drawn
// notice we offset it a little by random to increase realism
x += ctx.measureText(txt).width + ctx.lineWidth * Math.random();

// lets use an absolrequestAnimationFrameute transform to randomize y-position a little
ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random());

// and just cause we can, rotate it a little too to make it even
// more realistic
ctx.rotate(Math.random() * 0.005);

// if we still have chars left, loop animation again for this char
if (i < 0){i++; requestAnimationFrame(loop);}
}
})(); // just to self-invoke the loop
};

关于javascript - 编写效果Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46075297/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com