直接看图吧;

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

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. 【只要有ENA千万别用NCBI】拆分SRA文件,通过SRAtoolkits

    只要有ENA千万别用NCBI!!!! 最近开始分析网上Download的数据,一开始用人家现成的GWAS数据,后来觉得反正自己的数据到手该做的也是要做的,出来混早晚是要还的,所以就开始从头分析一些SR ...

  2. 简单js 切换左侧栏目的样式

    这是html代码,里面写了left.html <div id='mydiv'> <a class='qwe'>1</a> <a class='qwe'> ...

  3. 什么是DNS攻击?它是如何工作的?

    什么是DNS攻击?它是如何工作的? DNS攻击是一种利用域名系统中的弱点或漏洞的网络攻击.今天,互联网已成为我们生活中不可或缺的一部分.从社交到金融.购物再到旅游,我们生活的方方面面都是互联网.由于互 ...

  4. shell批量修改mysql用户密码

    需求 现在有这么一个需求, 需要大批量修改用户的密码, 需要注意的规则是: 必须添加的字符: *$#sjdKw% 用户名的第一位+*$#sjdKw%+用户名的最后一位,比如用户名chenglee,密码 ...

  5. CEF 右键添加开发者选项菜单项

    在项目开发过程中,有时候需要进行调试测试,然后我们可以在cef上下文菜单中添加自定义开发者工具菜单项,这样会比较方便,最后效果: 实现过程: 让自己的MyClientHandler来继承 CefCon ...

  6. Python入门 函数式编程

    高阶函数 map/reduce from functools import reduce def fn(x, y): return x * 10 + y def char2num(s): digits ...

  7. Docker入门 配置篇

    docker配置 http://www.runoob.com/docker/docker-tutorial.html

  8. mvc 之 学习地址

    https://blog.csdn.net/mss359681091/article/details/52135861

  9. ssm回顾笔记(一)

    这两天来到了农银,这边即将进行的一个项目是将ssh框架的电商项目迁移到springboot+ssm框架上,所以我基本上是三门技术在同时进行学习,当然以前学过ssm,现在只是回顾. spring 注解 ...

  10. Docker 搭建代码质量检测平台 SonarQube

    开始搭建 1.获取 postgresql 的镜像 $ docker pull postgres 2.启动 postgresql $ docker run --name db -e POSTGRES_U ...