整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
頁中添加滾動(dòng)字幕效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滾動(dòng)字體的設(shè)置</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.找到畫布對(duì)象
var ctx = canvas1.getContext("2d") // 2.上下文對(duì)象（畫筆）
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('每天學(xué)習(xí)一點(diǎn)點(diǎn)',x, 553)
x -= 3
}else{x=590}
}, 16)
</script>
</body>
</html>
用js來實(shí)現(xiàn)。
html：
<div class="box"> <p class="animate"> 文字滾動(dòng)的內(nèi)容文字滾動(dòng)的內(nèi)容文字滾動(dòng)的內(nèi)容文字滾動(dòng)的內(nèi)容 </p> </div>
css：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
