js帶文字的圓隨機運動

2022-03-05 01:43:19 字數 2316 閱讀 8820

首先是html**(其實就只有乙個畫布,記得要把外部js引入寫在body底部

圓中寫文字用到 文字的定位

用textbaseline定位高度在中間,

用textalign定位寬度在中間

以下**畫了有邊緣的圓及文字

var c=document.getelementbyid("one");

var ctx=c.getcontext("2d");

ctx.strokestyle="black";

ctx.beginpath();

ctx.fillstyle="lightgreen";

ctx.arc(100,100,50,0,math.pi*2,false

);ctx.stroke();

ctx.fill();

ctx.beginpath();

ctx.fillstyle="white";

ctx.font="40px arial";

ctx.textbaseline="middle";

ctx.textalign="center";

ctx.filltext("he",100,100);

ctx.stroketext("he",100,100);

circle

以下是隨機運動的圓(不過這個圓和文字是沒有邊緣線的,因為我覺得加邊緣線太醜了),令人苦笑不得的是最後它們都停留在了畫布邊緣..

var c = document.getelementbyid("one");

var ctx = c.getcontext("2d");

var arrhe =;

var arrne =;

var numhe = 100;

var numne = 5;

//隨機點

for (var i = 0; i < numhe; i++) );

}setinterval(

function

() =dot;

ctx.beginpath();

ctx.fillstyle = "lightgreen";

ctx.arc(dot.x, dot.y, 50, 0, math.pi * 2, false

); ctx.fill();

ctx.beginpath();

ctx.fillstyle = "white";

ctx.font = "40px arial";

ctx.textbaseline = "middle";

ctx.textalign = "center";

ctx.filltext("he", dot.x, dot.y);

if (dot.x < 0 || dot.x >c.width)

if (dot.y < 0 || dot.y >c.height)

dot.x +=speedx;

dot.y +=speedy;

});}

,16);

//生成隨機點位置和隨機方向

function

rnd(m,n)

function

rndsign()

move

array.foreach(function(currentvalue,index,arr),thisvalue)

currentvalue 必須。當前元素。

index 可選。當前元素的索引值。

arr 可選。當前元素所屬的陣列物件。

thisvalue 可選。不填時,預設為this

自製帶圓框的頭像

這篇文章是我的 ios開發每日小筆記 系列中的一片,記錄的是今天在開發工作中遇到的,可以用很短的文章或很小的demo演示解發布來的小心得小技巧。它們可能會給使用者體驗 效率得到一些提公升,或是之前自己沒有接觸過的技術,很開心的學到了,放在這裡得瑟一下。90 的作用是幫助自己回顧 記憶 複習。效果是這...

python程式設計求隨機數的隨機運算結果

開發乙個迴圈 5 次計算的小遊戲,每次隨機產生兩個 1 10的數字以及隨機選擇 運算子,構成乙個表示式,讓使用者計算式子結果並輸入結果,如果計算結果正確則加一分,如果計算結果錯誤不加分。如果正確率大於等於 80 則列印 闖關成功 否則列印 闖關不成功 題目其實不難,因為剛開始學程式設計所以求助我,這...

138 複製帶隨機指標的鍊錶(JS實現)

這道題的主要思路使用乙個map,key為原來的節點,value為轉殖的節點和指向該原節點的節點陣列,在遍歷複製的過程中不斷更新指標的指向 definition for a node.function node val,next,random param head return var copyran...