首先是html代码（其实就只有一个画布，记得要把外部js引入写在body底部
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="content-type" content="text" charset="utf-8" />
  5.     </head>
  6.     <body>
  7.         <canvas id="one" height="1000" width="1000"></canvas>
  8.         <script  src="./weixin.js"></script>
  9.     </body>
  10. </html>
圆中写文字用到 文字的定位

用textBaseline定位高度在中间，

用textAlign定位宽度在中间

以下代码画了有边缘的圆及文字

  1. var c=document.getElementById("one");
  2. var ctx=c.getContext("2d");
  3. ctx.strokeStyle="black";
  4. ctx.beginPath();
  5. ctx.fillStyle="lightgreen";
  6. ctx.arc(100,100,50,0,Math.PI*2,false);
  7. ctx.stroke();
  8. ctx.fill();
  9.  
  10. ctx.beginPath();
  11. ctx.fillStyle="white";
  12. ctx.font="40px Arial";
  13. ctx.textBaseline="middle";
  14. ctx.textAlign="center";
  15. ctx.fillText("He",100,100);
  16. ctx.strokeText("He",100,100);

circle

以下是随机运动的圆（不过这个圆和文字是没有边缘线的，因为我觉得加边缘线太丑了），令人苦笑不得的是最后它们都停留在了画布边缘..

  1. var c = document.getElementById("one");
  2. var ctx = c.getContext("2d");
  3. var arrHe = [];
  4. var arrNe = [];
  5. var numHe = 100;
  6. var numNe = 5;
  7.  
  8. //随机点
  9.     for (var i = 0; i < numHe; i++) {
  10.     arrHe.push({
  11.         x: rnd(c.width,50),
  12.         y: rnd(c.height,50),
  13.         speedX: rndSign() * rnd(1,0),
  14.         speedY: rndSign() * rnd(1,0)
  15.     });
  16. }
  17.  
  18. setInterval(
  19. function (){
  20. ctx.clearRect(0, 0, c.width, c.height);
  21. //He绘画
  22.  arrHe.forEach(
  23. function(dot) {
  24.     var {
  25.         x,
  26.         y,
  27.         speedX,
  28.         speedY
  29.     } = dot;
  30.     ctx.beginPath();
  31.     ctx.fillStyle = "lightgreen";
  32.     ctx.arc(dot.x, dot.y, 50, 0, Math.PI * 2, false);
  33.     ctx.fill();
  34.  
  35.     ctx.beginPath();
  36.     ctx.fillStyle = "white";
  37.     ctx.font = "40px Arial";
  38.     ctx.textBaseline = "middle";
  39.     ctx.textAlign = "center";
  40.     ctx.fillText("He", dot.x, dot.y);
  41.  
  42.     if (dot.x < 0 || dot.x > c.width) {
  43.         speedX *= -1;
  44.     }
  45.     if (dot.y < 0 || dot.y > c.height) {
  46.         speedY *= -1;
  47.     }
  48.     dot.x += speedX;
  49.     dot.y += speedY;
  50.  
  51. });
  52. }
  53. ,16);
  54.  
  55. //生成随机点位置和随机方向
  56. function rnd(m,n) {
  57.     return Math.random() * (m-n);
  58. }
  59.  
  60. function rndSign() {
  61.     return Math.random() >0.5 ? 1:-1;
  62. }

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. Centos7.4 更换国内yum源

    1.进入yum源配置文件夹.(配置之前先看看有没有安装wget命令呢,没的话可以先用当前的yum源安装一下再说.yum -y install wget) 2.转到配置文件目录  cd /etc/yum ...

  2. springcloud微服务总结三 服务客户端

    一 springcloud服务理解: dubbo中服务注册和调用都是都过注解来进行的,dubbo中在service层中调用服务是通过将@service注解改变为dubbo代码架包中的service注解 ...

  3. python学习之路---day04

    一:元组 元组案例:tuple=("张三","李四","王五","小六","大七",["1 ...

  4. php 编码和解码的函数

    URL: urlencode(); //编码 urldecode(); //解码 URL与数组互转: parse_url () http_build_query() base64: base64_en ...

  5. 洛谷 P2059 [JLOI2013]卡牌游戏(概率dp)

    题面 洛谷 题解 \(f[i][j]\)表示有i个人参与游戏,从庄家(即1)数j个人获胜的概率是多少 \(f[1][1] = 1\) 这样就可以不用讨论淘汰了哪些人和顺序 枚举选庄家选那张牌, 枚举下 ...

  6. sql语句中变量的写法

        $sql = "update cat set num=num+1 where cat_id=$art[cat_id]";    $sql = "update ca ...

  7. js中点和向量的基本方法

    var Point=function(x,y){ this.x= Number(x.toFixed(2))||0; this.y=Number(y.toFixed(2))||0; } Point.pr ...

  8. 更改CMD默认的初始路径

    一直用CMD开启本地服务,每一次都得切换路径,有点尴尬.记录一下,修改CMD默认路径 1.打开注册表编辑器(WIN+R打开运行.输入regedit,或者直接找到路径,双击打开C:\Windows\re ...

  9. Spark 1.6.2 + Beam 2.0.0读取Mongodb数据进行相应逻辑处理

    不多说,直接上干货! http://blog.csdn.net/jianglushou9763/article/details/73332805 如果需要 APACHE BEAM2.0.0版本如何支持 ...

  10. spark on yarn模式里需要有时手工释放linux内存

    为什么要提出这个问题? spark跑YARN模式或Client模式提交任务不成功(application state: ACCEPTED) 然后执行 [spark@master spark--bin- ...