直接看图吧;

这样的随机点,是小圆点组成的,然后一直在动,记录一下,万一以后要用到呢;

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 绘画随机点的更多相关文章

  1. 浅谈canvas绘画王者荣耀--雷达图

    背景: 一日晚上下班的我静静的靠在角落上听着歌,这时"滴!滴!"手机上传来一阵qq消息.原来我人在问王者荣耀的雷达图在页面上如何做出来的,有人回答用canvas绘画.那么问题来了, ...

  2. canvas实现随机验证码

    canvas实现随机验证码 知识点 canvas生成背景图和文字 设置字体样式和大小 String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写 ...

  3. 开发Canvas 绘画应用(四):实现拖拽绘画

    在开发Canvas绘画应用(三):实现对照绘画中,我们实现了视图引导的第一部分,这一篇我们来完成第二部分,即将图片直接拖到画布上进行绘画. ✁ 拖放如何实现? [拖放的基本概念]:创建一个绝对定位的元 ...

  4. 开发Canvas 绘画应用(三):实现对照绘画

    需求分析 在我的毕设中,提出了视图引导的概念,由两部分功能组成: (1)可以对照着图片进行绘画,即将图片以半透明的方式呈现在绘图板上,然后用户可以对照着进行绘画: (2)可以直接将简笔画图片直接拖拽到 ...

  5. 开发Canvas 绘画应用(二):实现绘画

    开发Canvas 绘画应用(一):搭好框架 中我们已经把基本框架及基础功能实现了,现在要实现本应用的重点:绘画功能. 首先分析一下,我们要实现绘画,需要具备的理论知识如下: (1)获取触摸点的坐标 类 ...

  6. 开发Canvas 绘画应用(一):搭好框架

    毕业汪今年要毕业啦,毕设做的是三维模型草图检索,年前将算法移植到移动端做了一个小应用(利用nodejs搭的服务),正好也趁此机会可以将前端的 Canvas 好好学一下~~毕设差不多做完了,现将思路和代 ...

  7. canvas验证码 - 随机字母数字

    基于canvas制作随机生成数字英文组合验证码效果,点击或刷新会自动重组.输入验证码提交验证效果代码. <div class="verification"> <i ...

  8. html5 canvas绘画时钟

    本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...

  9. Canvas绘画功能(待补充)

    由于项目的前端需要用户手绘输入,所以我们利用Canvas控件做绘画面板,并且实现了许多功能,包括手绘笔画,清空画板,上传手绘图,下载手绘图,记录用户笔画,上传背景图.以后有时间都写到这篇博客中,今天晚 ...

随机推荐

  1. *(volatile int *)解读

    #def ine reg_gpio_ctrl *(volatile int *)(ToVirtual(GPIO_REG_CTRL)) #define A (*(volatile unsigned lo ...

  2. Flutter 控件之 Routes 和 Navigator. [PopupRoute]

    一个 App 通常会有多个界面,每个界面实现不同的功能,并在多个界面之间跳转.在 Flutter 中多个界面的跳转是通过 Navigator 来实现的. 在 Flutter 中定义了一个 Overla ...

  3. php 排列组合函数(无重复组合,可重复组合【全排列组合】)

    <?php /** * 无重复排列組合 * @Author MAX * @DateTime 2018-09-07T16:28:40+0800 * @param Array $arr 需要排列組合 ...

  4. opencv学习之路(21)、模板匹配及应用

    一.模板匹配概念 二.单模板匹配 #include "opencv2/opencv.hpp" #include <iostream> using namespace s ...

  5. CMD控制器常用命令

    dir 查看当前路径文件cd..返回上一级路径cd 转到指定的文件夹 \n 将光标移动到下一行的第一格 \t 将光标移动到下一个水平制表位置 mspaint 画图 编译源代码 javac HelloW ...

  6. UVA11468 Substring

    思路 AC自动机+概率dp 设f[i][j]表示当前在第i位在AC自动机的第j个节点,满足条件的概率 AC自动机上的一个节点能被转移到当且仅当这个节点不是中止节点且无法通过fail指针跳到任何一个中止 ...

  7. 在 Linux 上使用 VirtualBox 的命令行管理界面

    VirtualBox 拥有一套命令行工具,你可以使用 VirtualBox 的命令行界面 (CLI) 对远程无界面的服务器上的虚拟机进行管理操作.在这篇教程中,你将会学到如何在没有 GUI 的情况下使 ...

  8. P1108 低价购买

    传送门 思路: 对于第一问很容易看出是求最长下降子序列,N2 的暴力就可解决.而第二问是求最优方案数(且不重复),需要判重.可以在求解最长下降子序列的基础上增开一个数组 g ,g[ i ] 表示以 i ...

  9. java连接Access数据库的两种方法

    where ziduan  in(select  ziduan from  table) 嵌套 ResultSet rs = pst.executeQuery();List list = new Ar ...

  10. zabbix3.4.7远程命令例子详解

    zabbix可以通过远程发送执行命令或脚本来对部分的服务求故障进行修复 zabbix客户端配置 设置zabbix客户端用户的sudo权限 执行命令visudo: Defaults:zabbix !re ...