js带文字的圆随机运动
<!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 实现文字滚动功能，可更改配置参数 带完整版解析代码。
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...
- 初探JavaScript（三）——JS带我"碰壁"带我飞
已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...
- Android开发学习之路-带文字的图片分享
有用过微信分享SDK的都应该知道,微信分享到朋友圈的时候是不能同时分享图片和文字的,只要有缩略图,那么文字就不会生效.那么问题就来了,如果我们想把APP内的某些内容连带图片一起分享到微信,是不是没办法 ...
- Android实现自定义带文字和图片的Button
Android实现自定义带文字和图片的Button 在Android开发中经常会需要用到带文字和图片的button,下面来讲解一下常用的实现办法. 一.用系统自带的Button实现 最简单的一种办法就 ...
- js实现文字截断
先前用jq做了一个文字截断功能,但是不用jq的项目要实现此功能还要引如jq显得过于麻烦.这里写了一个js的文字截断功能.直接上代码. HTML(测试用的): <div>我是pox我是pox ...
- js实现文字逐个显示
先把代码摆上了吧: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtm ...
- 使用JS实现文字搬运工
使用JS实现文字搬运工 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html><head><meta http-equiv=&quo ...
- 【Android】Android实现自定义带文字和图片的Button
在Android开发中经常会需要用到带文字和图片的button,下面来讲解一下常用的实现办法. 一.用系统自带的Button实现 最简单的一种办法就是利用系统自带的Button来实现,这种方式代码量最 ...
- JS控制文字只显示两行，超出部分显示省略号
由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...
随机推荐
- Python3入门之软件安装
获得更多资料欢迎进入我的网站或者 csdn或者博客园 最近将我的Python笔记整理下,希望能对他人有所帮助,这是第一课,安装入门篇: windows下安装Python 1.下载,从这里下载:[下载链 ...
- (WIN7)delphi7运行关闭出现cannot creat file"C:\program file\borland\delphi7\bin\initcc32.exe拒绝访问
1. 程序右键,以管理权限运行.2. 将Delphi7目录只读取消.WIN7以上的操作系统正常运行程序不是以管理员方式运行的
- 2B - Amy
数据范围是18位,把每一位加起来的和最多9*18 = 162 所以只需考虑n-162 - n的数即可,暴力解决 #include <iostream> using namespace st ...
- x-boot
https://github.com/Exrick/x-boot-front https://gitee.com/Exrick/x-boot
- JAVA GET 和 POST 的区别
GET 和 POST 的区别 GET请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:/test/demo_form.asp?name1=value1&name2=val ...
- 【算法笔记】B1001 害死人不偿命的（3n+1）猜想
1001 害死人不偿命的(3n+1)猜想 (15 分)卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把 (3n+1) 砍掉一半.这样一直反复砍 ...
- 洛谷 [TJOI2010]中位数
题目链接 题解 比较水.. 常见套路,维护两个堆 Code #include<bits/stdc++.h> #define LL long long #define RG register ...
- CH2401 送礼物 双向搜索
双向搜索:把前一半的可行状态搜出来,然后sort+unique,之后搜后一半时,结束时二分一下前一半的答案,拼出一个与W尽量接近的ans来更新 ps:距LYD说前一半取n/2+2时跑的最快...不知, ...
- cmd 打开mysql客户端
- Python中将列表转化成矩阵表示
list1 = [] a = [1,3,4] b = [2,5,6] list1.append(a) list1.append(b) arr = np.array(list1) # 打印arr pri ...