网站首页 > 技术文章正文

html中滚动字体的设置（html字体滚动效果）

nanyue 2024-10-31 13:51:24 技术文章 5 ℃

<!DOCTYPE html>

<html>

<head>

<title>滚动字体的设置</title>

</head>

<body>

var canvas1 = document.querySelector("#canvas1") // 1.找到画布对象

var ctx = canvas1.getContext("2d") // 2.上下文对象（画笔）

ctx.shadowBlur = 10; // 阴影距离

ctx.shadowColor = "red" // 阴影颜色

ctx.shadowOffsetX = 30 // 阴影偏移

ctx.shadowOffsetY = 30 // 阴影偏移

ctx.font = "150px 楷体"

ctx.fillText("你好！", 20,150)

ctx.fillText("你好！", 20,350)

ctx.strokeText('你好！',23, 153)

ctx.strokeText('你好',23, 553)

var x = 600

setInterval(function(){

if(x > -350){

//清空画布

ctx.clearRect(0,0,600,600)

ctx.strokeText('你好！',x, 153)

ctx.fillText("你好！", x,350)

ctx.font = "50px 宋体"

ctx.strokeText('每天学习一点点',x, 553)

x -= 3

}else{x=590}

}, 16)

</script>

</body>

</html>