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控件做绘画面板,并且实现了许多功能,包括手绘笔画,清空画板,上传手绘图,下载手绘图,记录用户笔画,上传背景图.以后有时间都写到这篇博客中,今天晚 ...
随机推荐
- c#高级编程第七版 学习笔记 第二章 核心c#
第二章 核心C# 本章内容: 声明变量 变量的初始化和作用域 C#的预定义数据类型 在c#程序中使用条件语句.循环和跳转语句执行流 枚举 名称空间 Main()方法 基本的命令行c#编译器选项 使用S ...
- java 43 接口
- Android一个工程引用另一个工程的方法
一个工程包含另一个工程.相当于一个jar包的引用.但又不是jar包反而像个package 现在已经有了一个Android工程A.我们想扩展A的功能,但是不想在A的基础上做开发,于是新建了另外一个And ...
- shell的交互式和非交互式登录
工作中经常碰见环境变量加载问题,归根结底就是配置文件的加载问题. 一般会有四种模式:交互式登陆.非交互式登陆.交互式非登陆.非交互非登陆. 交互式和非交互式对环境变量的加载: +----------- ...
- 编码原则 之 Explicit Dependencies Principle
Explicit Dependencies Principle The Explicit Dependencies Principle states: Methods and classes shou ...
- Perl新接触的小命令
0,glob()函数 my @infile = glob("$indir/*.txt.gz"); #获得指定路径下的文件名,并形成列表,如果$indir为空,则自动匹配当前目录下 ...
- Ubuntu 14 如何解压 .zip、.rar 文件
.zip 和 .rar 是Windows下常用的压缩文件,在Ubuntu中如何解压. [解压.zip文件] Ubuntu中貌似已经安装了unzip软件,解压命令如下: unzip ./FileName ...
- 《F4+2》—基于原型的团队项目需求调研与分析
任务一 1.调研对象 老师和学生 2.所开发的软件原型 太阳系模型软件 3.调研方法 问卷调查法 原型法 任务二 采用UML模型描述任务1所获取的用户需求,如下: 主要需求: 教师:把系统展示给学生, ...
- vue的技巧代码
转载:https://segmentfault.com/a/1190000014085613 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList ...
- 二叉树放置照相机 Binary Tree Cameras
2019-03-27 15:39:37 问题描述: 问题求解: 很有意思的问题,问题描述简单,求解过程也可以非常的简洁,是个难得的好题. 求解的过程是自底向上进行分析,对于叶子节点,如果在叶子上放置照 ...