基於原生js和css3實現barrage彈幕效果

2021-09-12 19:19:24 字數 1511 閱讀 9696

執行圖

使用cancas畫板實現。迴圈重新整理和繪製畫板畫素,每一次迴圈更改繪製元素的x座標

核心函式:

clearrect(x,y,width,height)在給定的矩形內清除指定的畫素

filltext(content,x,y)將content內容繪製到指定的(x,y)處

原始碼展示:

var canvas = document.getelementbyid("canvas-1");//獲取cancas標籤dom元素

var vas = canvas.getcontext("2d");//獲取畫板操作物件

var barrage_content = document.getelementsbyclassname("barrage-content")[0];//獲取彈幕顯示區域dom

var width = barrage_content.clientwidth;//獲取展示區域width

var height = barrage_content.clientheight;//獲取展示區域height

var positiontop = barrage_content.clienttop;//獲取展示區域top

var postionleft = barrage_content.clientleft;//獲取展示區域left

var rect = barrage_content.getboundingclientrect();//獲取展示區域矩形範圍區

var numx = [100, 150, 260,270,300,310,315,415,400,250];//初始x位置池

var numy = [100, 300, 400,320,60,55,389,260,235,210];//初始y位置池

var rangevalue = 20;

//測試用彈幕資料

var barragedata_2 = [,,

,,,,

,,,,

,,,,

,];(function () {

var color = ["red","blue","green"];//隨機顏色池

console.log("barrage_clientwidth", width, "barrage_clientheight", height);

canvas.width = width;//設定畫板width

canvas.height = height;//設定畫板height

vas.rect(rect.left, rect.top, rect.width, rect.height);//建立畫板矩形區

// vas.font = "20px arial"

for (var i = 0; i

css3光束 CSS3實現光束和波浪

頁面html 人生在旅途,需要您的指引 樣式 語法解析 animation 屬性是乙個簡寫屬性,用於設定六個動畫屬性 animation name duration timing function delay iteration count direction keyframes定義和用法 通過 k...

css3動畫和js動畫

css3動畫 animation 是個簡寫屬性,用於設定六個動畫屬性。注意必須規定animation duration屬性,否則時長為0 animation timing function規定動畫速度曲線 alternate 動畫應該輪流反向 transtion 過度屬性 預設 all 0 ease...

css3原生變數var

css 變數是由網頁的作者或使用者定義的實體,用來指定文件中的特定變數。使用自定義屬性來設定變數名,並使用特定的 var 來訪問。css中原生的變數定義語法是 變數使用語法是 var 其中 表示我們的變數名稱。關於命名這個東西,各種語言都有些顯示,例如css選擇器不能是數字開頭,js中的變數是不能直...