js带文字的圆随机运动

Posted 2021-01-10 芬芸

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js带文字的圆随机运动相关的知识，希望对你有一定的参考价值。

首先是html代码（其实就只有一个画布，记得要把外部js引入写在body底部

<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text" charset="utf-8" />
    </head>
    <body>
        <canvas id="one" height="1000" width="1000"></canvas>
        <script  src="./weixin.js"></script>
    </body>
</html>

圆中写文字用到文字的定位

用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++) {
    arrHe.push({
        x: rnd(c.width,50),
        y: rnd(c.height,50),
        speedX: rndSign() * rnd(1,0),
        speedY: rndSign() * rnd(1,0)
    });
}

setInterval(
function (){
ctx.clearRect(0, 0, c.width, c.height);
//He绘画
 arrHe.forEach(
function(dot) {
    var {
        x,
        y,
        speedX,
        speedY
    } = 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) {
        speedX *= -1;
    }
    if (dot.y < 0 || dot.y > c.height) {
        speedY *= -1;
    }
    dot.x += speedX;
    dot.y += speedY;

    
});
}
,16);

//生成随机点位置和随机方向
function rnd(m,n) {
    return Math.random() * (m-n);
}

function rndSign() {
    return Math.random() >0.5 ? 1:-1;
}

move

array.forEach(function(currentValue, index, arr), thisValue)

currentValue 必须。当前元素。

index 可选。当前元素的索引值。

arr 可选。当前元素所属的数组对象。

thisValue 可选。不填时，默认为this

以上是关于js带文字的圆随机运动的主要内容，如果未能解决你的问题，请参考以下文章

带无缝滚动的轮播图（含JS运动框架）-简洁版

AEJoy —— 随机运动表达式之 12 个应用实例

原生JS,运动的小人

HTML代码片段

寻找有缘人：你能说出下面图案所包含的随机数据统计分析预测原理吗？请以文字形式阐述！