首先是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带文字的圆随机运动的更多相关文章

  1. js 实现文字滚动功能，可更改配置参数 带完整版解析代码。

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...

  2. 初探JavaScript（三）——JS带我"碰壁"带我飞

    已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...

  3. Android开发学习之路-带文字的图片分享

    有用过微信分享SDK的都应该知道,微信分享到朋友圈的时候是不能同时分享图片和文字的,只要有缩略图,那么文字就不会生效.那么问题就来了,如果我们想把APP内的某些内容连带图片一起分享到微信,是不是没办法 ...

  4. Android实现自定义带文字和图片的Button

    Android实现自定义带文字和图片的Button 在Android开发中经常会需要用到带文字和图片的button,下面来讲解一下常用的实现办法. 一.用系统自带的Button实现 最简单的一种办法就 ...

  5. js实现文字截断

    先前用jq做了一个文字截断功能,但是不用jq的项目要实现此功能还要引如jq显得过于麻烦.这里写了一个js的文字截断功能.直接上代码. HTML(测试用的): <div>我是pox我是pox ...

  6. js实现文字逐个显示

    先把代码摆上了吧: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtm ...

  7. 使用JS实现文字搬运工

    使用JS实现文字搬运工 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html><head><meta http-equiv=&quo ...

  8. 【Android】Android实现自定义带文字和图片的Button

    在Android开发中经常会需要用到带文字和图片的button,下面来讲解一下常用的实现办法. 一.用系统自带的Button实现 最简单的一种办法就是利用系统自带的Button来实现,这种方式代码量最 ...

  9. JS控制文字只显示两行，超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

随机推荐

  1. SVN Unable to connect to a repository at URL 不知道这样的主机： 问题解决

    工具是eclipse Maven ,搭建好项目的框架后上传SVN出现如下错误: 不知道这样的主机.  svn: Unable to connect to a repository at URL 'ht ...

  2. 一款很好用的页面滚动元素动画插件-AOS.JS

    aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 加载方法 ...

  3. 微信小程序获取用户手机号，服务器解码demo

    原理:通过微信登陆接口wx.login得到encryptedData . iv  .code.经过接口处理code得到sessionkey.最后官方demo得到解密后的手机号.(接口处理这一步也可以在 ...

  4. 自已的sql server练习小记

    print getdate(); print datediff(year,'1987-09-13',getdate()) select * from CallRecords select top 5 ...

  5. Wormholes 虫洞 BZOJ 1715 spfa判断负环

    John在他的农场中闲逛时发现了许多虫洞.虫洞可以看作一条十分奇特的有向边,并可以使你返回到过去的一个时刻(相对你进入虫洞之前).John的每个农场有M条小路(无向边)连接着N (从1..N标号)块地 ...

  6. 三元运算符，i++（先用后加） ++i （先加后用）区别

    三元运算符是软件编程中的一个固定格式,语法是“条件表达式?表达式1:表达式2”.使用这个算法可以使调用数据时逐级筛选. 表达式:“()? :”. ()中进行二元运算 ?在运算,就形成三元运算符   i ...

  7. CSS column 布局总结

    有时候 第一列 底部会跑到顶部那里一部分.这时候应该这样. 在 每个 div前加上 display:inline-block

  8. C# 利用Powershell获取网络相关信息

    利用Get-NetAdapter获取信息 Get-NetAdapter 参考链接:https://docs.microsoft.com/en-us/powershell/module/netadapt ...

  9. Codeforces - 631B 水题

    注意到R和C只与最后一个状态有关 /*H E A D*/ struct node2{ int kind,las,val,pos; node2(){} node2(int k,int l,int v,i ...

  10. [转] Ubuntu安装Fcitx以及Fcitx输入中文不显示候选词框的解决办法

    [From] http://blog.csdn.net/qq_21397217/article/details/52447263 1. 安装Fcitx所需组件 $ sudo apt install f ...