新闻 资讯 金融 知识 财经 理财 科技 金融 经济 产品 系统 连接 科技 聚焦
首页 > 产品 > 热点 > > 正文

天天亮点!html自定义滚动条样式 html滚动条样式

2022-09-22 15:20:51来源:互联网

网页中添加滚动字幕效果

!DOCTYPE html


(相关资料图)

html

head

meta charset="utf-8"

title滚动字体的设置/title

/head

body

canvas id="canvas1" width="600" height="600" style="border:1px solid #000000"/canvas

script type="text/javascript"

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)

canvas绘制文字

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

关键词:

热点