鍦↗avaScript涓疄鐜板脊骞曟晥鏋滃彲浠ヤ娇鐢℉TML5鐨凜anvas鏉ョ粯鍒跺脊骞曪紝骞朵娇鐢ㄥ畾鏃跺櫒鏉ヤ笉鏂洿鏂板脊骞曠殑浣嶇疆銆?/p>

浠ヤ笅鏄竴涓畝鍗曠殑瀹炵幇寮瑰箷鏁堟灉鐨勭ず渚嬩唬鐮侊細

HTML:

<canvas id="danmuCanvas"></canvas>

CSS:

#danmuCanvas {
position: absolute;
top: 0;
left: 0;
}

JavaScript:

// 鑾峰彇Canvas鍏冪礌鍜屼笂涓嬫枃
var canvas = document.getElementById("danmuCanvas");
var ctx = canvas.getContext("2d");
// 璁剧疆Canvas鐨勫楂?/span>
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 寮瑰箷鏁版嵁
var danmus = [
{ text: "寮瑰箷1", x: canvas.width, y: 100, speed: 5 },
{ text: "寮瑰箷2", x: canvas.width, y: 200, speed: 8 },
{ text: "寮瑰箷3", x: canvas.width, y: 300, speed: 10 }
];
function drawDanmus() {
// 娓呯┖Canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 缁樺埗姣忎釜寮瑰箷
for (var i = 0; i < danmus.length; i++) {
var danmu = danmus[i];
ctx.fillText(danmu.text, danmu.x, danmu.y);
// 鏇存柊寮瑰箷鐨勪綅缃?/span>
danmu.x -= danmu.speed;
// 濡傛灉寮瑰箷瓒呭嚭灞忓箷宸﹁竟鐣岋紝鍒欓噸鏂扮Щ鍔ㄥ埌灞忓箷鍙宠竟鐣?/span>
if (danmu.x < -ctx.measureText(danmu.text).width) {
danmu.x = canvas.width;
}
}
// 涓嶆柇鏇存柊Canvas
requestAnimationFrame(drawDanmus);
}
// 鍚姩鍔ㄧ敾
drawDanmus();

涓婅堪浠ｇ爜浼氬湪灞忓箷涓婄粯鍒朵笁涓脊骞曪紝姣忎釜寮瑰箷鐨勫垵濮嬩綅缃€侀€熷害鍜屽唴瀹归兘鍙互鑷畾涔夈€傚脊骞曚細浠庡睆骞曞彸渚хЩ鍔ㄥ埌灞忓箷宸︿晶锛屽綋寮瑰箷瓒呭嚭灞忓箷宸﹁竟鐣屽悗锛屼細閲嶆柊绉诲姩鍒板睆骞曞彸杈圭晫銆傛暣涓脊骞曟晥鏋滈€氳繃涓嶆柇鏇存柊Canvas涓殑鍐呭瀹炵幇锛屼娇鐢?code>requestAnimationFrame鍑芥暟鏉ュ疄鐜板姩鐢绘晥鏋溿€?/p>