canvas 绘画随机点
直接看图吧;

这样的随机点,是小圆点组成的,然后一直在动,记录一下,万一以后要用到呢;
canvas的具体设置我就不写了,另一篇文档里有;
drawRandomDot () {
let leftCanvas = this.leftCanvas.nativeElement;
let leftContext = leftCanvas.getContext("2d");
let rightCanvas = this.rightCanvas.nativeElement;
let rightContext = rightCanvas.getContext("2d");
if(this.dotTimeTicket == null){
this.dotTimeTicket = setInterval(function(){
leftContext.clearRect(0,0,280,80);
for(var i = 0; i < 14; i++){
for(let j = 0; j < 55; j++){
let random = Math.ceil(Math.random() * 10);
if(random > 5){
leftContext.beginPath();
leftContext.arc(( 5*(j+1)),( 5*(i+1) ),2,0,2*Math.PI);
leftContext.fillStyle="rgba(0,192,255,0.65)";
leftContext.fill();
leftContext.closePath();
}
}
}
rightContext.clearRect(0,0,280,30);
for(var i = 0; i < 6; i++){
for(let j = 0; j < 55; j++){
let random = Math.ceil(Math.random() * 10);
if(random > 5){
rightContext.beginPath();
rightContext.arc(( 5*(j+1)),( 5*(i+1) ),2,0,2*Math.PI);
rightContext.fillStyle="rgba(0,192,255,0.65)";
rightContext.fill();
rightContext.closePath();
}
}
}
},300);
}
}
canvas 绘画随机点的更多相关文章
- 浅谈canvas绘画王者荣耀--雷达图
背景: 一日晚上下班的我静静的靠在角落上听着歌,这时"滴!滴!"手机上传来一阵qq消息.原来我人在问王者荣耀的雷达图在页面上如何做出来的,有人回答用canvas绘画.那么问题来了, ...
- canvas实现随机验证码
canvas实现随机验证码 知识点 canvas生成背景图和文字 设置字体样式和大小 String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写 ...
- 开发Canvas 绘画应用(四):实现拖拽绘画
在开发Canvas绘画应用(三):实现对照绘画中,我们实现了视图引导的第一部分,这一篇我们来完成第二部分,即将图片直接拖到画布上进行绘画. ✁ 拖放如何实现? [拖放的基本概念]:创建一个绝对定位的元 ...
- 开发Canvas 绘画应用(三):实现对照绘画
需求分析 在我的毕设中,提出了视图引导的概念,由两部分功能组成: (1)可以对照着图片进行绘画,即将图片以半透明的方式呈现在绘图板上,然后用户可以对照着进行绘画: (2)可以直接将简笔画图片直接拖拽到 ...
- 开发Canvas 绘画应用(二):实现绘画
开发Canvas 绘画应用(一):搭好框架 中我们已经把基本框架及基础功能实现了,现在要实现本应用的重点:绘画功能. 首先分析一下,我们要实现绘画,需要具备的理论知识如下: (1)获取触摸点的坐标 类 ...
- 开发Canvas 绘画应用(一):搭好框架
毕业汪今年要毕业啦,毕设做的是三维模型草图检索,年前将算法移植到移动端做了一个小应用(利用nodejs搭的服务),正好也趁此机会可以将前端的 Canvas 好好学一下~~毕设差不多做完了,现将思路和代 ...
- canvas验证码 - 随机字母数字
基于canvas制作随机生成数字英文组合验证码效果,点击或刷新会自动重组.输入验证码提交验证效果代码. <div class="verification"> <i ...
- html5 canvas绘画时钟
本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...
- Canvas绘画功能(待补充)
由于项目的前端需要用户手绘输入,所以我们利用Canvas控件做绘画面板,并且实现了许多功能,包括手绘笔画,清空画板,上传手绘图,下载手绘图,记录用户笔画,上传背景图.以后有时间都写到这篇博客中,今天晚 ...
随机推荐
- java 全局变量 的小结
利用关键字final声明常量,对于全局的常量(即在整个项目中都可用)通常按以下模式声明:public static final int MAX_VALUE=512 如果某常量只在本类使用,则应将其定义 ...
- 爬起点小说 day02
总的来说起点小说还是挺好爬的,就是爬取小说的时候太慢了,4000多本小说就爬了2天一夜 首先爬取的是网页的所有类别,并把类别名存入到mongodb中,链接存到redis中: import scrapy ...
- Sanic
基础 厉害了我的 Sanic hello word, Sanic
- 【题解】Luogu P2763 试题库问题
原题传送门 这题很简单啊 从源点向k类题目分别连流量为所需数量的边 从每道题向汇点连一条流量为1的边(每题只能用1次) 从类型向对应的题目连一条流量为1的边 跑一遍最大流 如果最大流小于所需题目数量, ...
- 自制操作系统Antz(1)——Boot Sector
0.引子 最近在看操作系统底层方面的东西,最开始的为什么是07c00h这个问题就让我对操作系统有了很大的兴趣.所以准备在看书之余顺便写一个操作系统(Anz).至于为什么这个系统会被叫做Antz,可以参 ...
- mongodb集群配置及备份恢复
Mongodb安装: 编辑/etc/yum.repos.d/mongodb.repo,添加以下: [MongoDB] name=MongoDB Repository baseurl=https://r ...
- 剑指offer(45)扑克牌顺子
题目描述 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他决 ...
- 剑指offer(63)数据流中的中位数
题目描述 如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值.如果从数据流中读出偶数个数值,那么中位数就是所有数值排序之后中间两个数的平均值.我们 ...
- python中多继承C3算法研究
在python的面向对象继承问题中,单继承简单易懂,全部接受传承类的属性,并可添加自带属性, 但是,在多继承情况下,会遇到多个被继承者的顺序问题,以及多次继承后查找前几次继承者需求属性时,可能不易发现 ...
- linux下如何编译安装gcc-8.3.0
1. 获取源码 wget https://mirrors.ustc.edu.cn/gnu/gcc/gcc-8.3.0/gcc-8.3.0.tar.xz -P ~ tar xvf gcc-8.3.0.t ...