看b站時，對彈幕的實現產生了興趣，一開始想到用css3動畫去實現，後來感覺這樣效能不是很好，查了下資料，發現可以用canvas實現，於是就摸索著寫了乙個簡單的彈幕。
彈幕功能
支援動態新增彈幕
彈幕不重疊
自定義彈幕顏色
效果圖
前端框架選了比較熟悉的vuejs
彈幕滾動的基本思路就是通過定時器不斷地改變彈幕的位置，時時重繪畫布。
實現步驟
先加入乙個canvas標籤，這裡有個注意點，關於裝置畫素比對canvas的影響，會出現繪圖模糊。
// 如果單純這樣寫，canvas會出現模糊
//為了不出現模糊，需要設定canvas的css寬高為上下文寬高的1/devicepixelratio，
本文是對於devicepixelratio:2的裝置設定的，該值可從window.devicepixelratio取得。
// 後面會用到
var dmarr = ;
var gap = 80; // 彈幕的上下間距
var hiddencanvas = this.$refs.hiddencanvas;
// 增加彈幕的方法
function pushdm(text, color) }
dmarr.push();
}// 隨機獲得y座標
function gety()
// 隨機獲得顏色
function getcolor() `;
}// 寫乙個for迴圈，初始化30條彈幕
for (let i = 0; i < 30; i++) `);
}
var timer = null;
var ctx = this.$refs.canvas.getcontext('2d');
function start()
ctx.fillstyle = `#$`;
ctx.filltext(dm.text, dm.x, dm.y);
} ctx.restore();
}, 20);
}function stop()
發表
var dminput = '';
var color = ''; // 可自定義彈幕的顏色
function sent()
Canvas 實現乙個時鐘
使用canvas實現另乙個小時鐘，效果圖如下 前端html canvas not supported 下面是example.js的具體實現 var canvas document.getelementbyid canvas var context canvas.getcontext 2d var f...
使用canvas實現乙個圓球的觸壁反彈
html canvas id canvas width 500 height 500 style border 1px solid ff0000 canvas js1.獲取上下文 let canvas document.getelementbyid canvas let ctx canvas.get...
乙個canvas中strokeStyle的疑問
這個效果是圓弧是紅色，但是如果strokestyle在後面，就不會顯示紅色。為什麼？cans.linewidth 10 cans.stroke cans.strokestyle red canvas中的常用命令 canvas畫布設定width和height，裡面的xy是相對畫布的左上角開始0,0.l...