当前位置: 首页 > 编程日记 > 正文

小程序画布,随机24个数显示在画布上面,不可重叠

QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票

效果图(下面两个图都是随机显示24的圆圈在画布上面)

实现代码

<!--pages/test2/test2.wxml-->
<canvas style="width: 100%; height:700rpx;" canvas-id="myCanvas"></canvas>
canvas{background: #EEEEEE
}

js

// pages/test2/test2.js
var that;Page({data: {},onLoad: function(options) {that =this;},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {// // 使用 wx.createContext 获取绘图上下文 contextvar arr = [];var context = wx.createCanvasContext('myCanvas')console.log()// returnlet y=0for (let i = 1; i < 25; i++) {y++var www = Math.floor(Math.random() * 80 * 4 + 20);var hhh = Math.floor(Math.random() * 80 * 3.8 + 20);let obj ={www:www,hhh: hhh};if (arr.length == 0) {arr.push(obj)that.getCtx(www, hhh, i, context);} else {//if_Availability  是否可用// console.log('if_Availability', that.if_Availability(www, hhh, arr))if (that.if_Availability(www, hhh, arr)) {arr.push(obj)that.getCtx(www, hhh, i, context);} else {// if (y < 100) {i--;// }}}}},if_Availability(www, hhh, arr){let status =true// console.log('arr', arr, www, hhh)for (let i = 0; i < arr.length; i++) {let y_www = Math.abs((arr[i].www + 20) - (www + 20))let y_hhh = Math.abs((arr[i].hhh + 20) - (hhh + 20))console.log(y_www,y_hhh,arr);if (y_www < 40 && y_hhh < 40) {status = false}}return status},  getCtx(www, hhh, i, context) {context.setStrokeStyle("#00ff00")context.setLineWidth(2)context.setFontSize(20)context.fillText(i, i<10?www - 5:www-10, hhh + 5)context.arc(www, hhh, 20, 1, 20, false)context.stroke()context.draw(true)},/*** 生命周期函数--监听页面显示*/onShow: function() {},})

相关文章:

hacktoberfest_Hacktoberfest 2018:如何获得免费衬衫—即使您是编码新手

hacktoberfestEvery October, Digital Ocean and GitHub ship out free Hacktoberfest shirts to thousands of people around the world.每年10月&#xff0c;Digital Ocean和GitHub都会向全球成千上万的人运送免费的Hacktoberfest衬衫。 I’ve gotten Hacktoberfest shirts …

Android自动化测试框架

1、Monkeyrunner&#xff1a;优点&#xff1a;操作最为简单&#xff0c;可以录制测试脚本&#xff0c;可视化操作&#xff1b;缺点&#xff1a;主要生成坐标的自动化操作&#xff0c;移植性不强&#xff0c;功能最为局限&#xff1b; 2、Rubotium&#xff1a;主要针对某一个…

详解 Date 对象

JS使用Date对象来处理日期和时间 五种调用Date函数的方式 Date() 单纯的作为函数调用&#xff0c;传入的参数会被忽略&#xff0c;返回当前日期和时间的字符串表示。 new Date() 作为构造函数调用。 返回当前日期和时间的Date对象。 new Date(Milliseconds) 作为构造函数调用…

Bootstrap select 多选并获取选中的值

QQ技术交流群 173683866 526474645 欢迎加入交流讨论&#xff0c;打广告的一律飞机票 效果图&#xff1a; 输出日志 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><script src"js/jquery-3.4.1.min.js&quo…

如何在React中使用Typescript

TypeScript can be very helpful to React developers.TypeScript对React开发人员可能非常有帮助。 In this video, Ben Awad teaches how to use Typescript in React and shares some of its benafits. He also tells about a great boilerplate for TypeScript React proje…

java web 开发应用 ----过滤器

过滤器的作用 1.当用户请求web资源时&#xff0c;如果没有过滤器&#xff0c;用户可以直接获取到这个web资源&#xff0c;当有了过滤器之后&#xff0c;当用户请求web资源时&#xff0c;web容器中的过滤器先会拦截到这个请求&#xff0c;然后根据这个请求 做相应的处理&#xf…

小程序在wxml使用indexOf

QQ技术交流群 173683866 526474645 欢迎加入交流讨论&#xff0c;打广告的一律飞机票 demo场景&#xff1a; 有两个数组&#xff0c;页面渲染一个数组1&#xff0c;数组2中有数组1随机下标的值&#xff0c;判断数组1是否包含数组2的值&#xff0c;如果包含了就改变当前下标的…

d3.js图表_如何使用D3.js建立历史价格图表

d3.js图表逐步可视化财务数据集的方法 (A step by step approach towards visualizing financial datasets) It is a challenge to communicate data and display these visualizations on multiple devices and platforms.交流数据并在多个设备和平台上显示这些可视化内容是一…

Harris角点

可参考&#xff1a;http://www.cnblogs.com/ronny/p/4009425.html http://www.cnblogs.com/ztfei/archive/2012/05/07/2487123.html http://blog.csdn.net/crzy_sparrow/article/details/7391511 矩阵M(x)的特征值能表示在水平和竖直方向的变化程度&#xff0c;但Harris给出的角…

【博客美化】公告栏显示个性时间

设置侧边公告栏显示个性化时间 效果图&#xff1a; <div id"myTime"><object classid"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version8,0,0,0"…

微信小程序实现退款

QQ技术交流群 173683866 526474645 欢迎加入交流讨论&#xff0c;打广告的一律飞机票 退款php代码 <?php // ---------------------------------------------------------------------- // | Tplay [ WE ONLY DO WHAT IS NECESSARY ] // -------------------------------…

firebase 发生消息_如何在命令行提示符下显示当前的Firebase项目名称,以防止发生危险错误...

firebase 发生消息by Thang Minh VuThang Minh Vu 如何在命令行提示符下显示当前的Firebase项目名称&#xff0c;以防止发生危险错误 (How to show your current Firebase project name on the command line prompt to prevent dangerous errors) When working on a project w…

使用SQLite删除Mac OS X 中launchpad里的快捷方式

一般情况下&#xff0c;从App Store安装的应用程序&#xff0c;如果应用删除&#xff0c;那么launchpad里对应的图标会一起删除了。 而对于不是通过App Store安装的应用程序&#xff0c;删除应用程序&#xff0c;Launchpad中很可能仍然留有相关程序图标。不能忍&#xff01;是要…

php传递JSON数据

QQ技术交流群 173683866 526474645 欢迎加入交流讨论&#xff0c;打广告的一律飞机票 php代码 public function ttt(){$data request()->param();$refund_fee $data[total_fee];$refund_phone $data[refund_phone];// consignee-金额&#xff1b;number-电话号码&a…

中国制造2025+互联网+,引领制造业发展

"中国制造2025""互联网"&#xff0c;引领制造业发展转载于:https://www.cnblogs.com/DTWolf/p/4733568.html

swift通知栏推送_如何使用Swift和Laravel使用推送通知创建iOS加密跟踪应用

swift通知栏推送by Neo Ighodaro由新Ighodaro 如何使用Swift和Laravel使用推送通知创建iOS加密跟踪应用 (How to create an iOS crypto tracking app with push notifications using Swift and Laravel) 第2部分 (Part 2) You will need the following installed on your mach…

【转】MySQL常用命令总结

http://blog.csdn.net/qq_33850438/article/details/52144686 MySQL常用的基本操作&#xff0c;以下都是MySQL 5.0下测试通过首先说明下&#xff0c;记住在每个命令结束时加上&#xff1b;&#xff08;分号&#xff09; 1. 导出整个数据库 mysqldump -u 用户名 -p --default-ch…

JS中window.document对象

小知识点注&#xff1a;外面双引号&#xff0c;里面的双引号改为单引号&#xff1b; 在div里面行高设置和整个外面高度一样&#xff0c;才能用竖直居中&#xff0c;居中是行居中 文本框取出来的值是字符串&#xff0c;需要用parseint()转化为数字 Window.document对象 一、找到…

php 常用方法

QQ技术交流群 173683866 526474645 欢迎加入交流讨论&#xff0c;打广告的一律飞机票 字符串分割成数组 explode() $str_formId aa,bb,cc;$arr_formId explode(,, $str_formId); 删除数组的第一个下标 array_shift() $str_formId aa,bb,cc;$arr_formId explode(,, $str_f…

stackoverflow_StackOverflow帐户如何确保您在公认的开发人员表格中占有一席之地

stackoverflowby Melchor Tatlonghari由Melchor Tatlonghari StackOverflow帐户如何确保您在公认的开发人员表格中占有一席之地 (How a StackOverflow account can secure you a seat at the recognised developer table) I have never met a developer who hasn’t heard of …

Python文件打包成exe

1. 安装pyinstaller pip install pyinstaller 2.如果有外部依赖包 将外部依赖包放到你的python安装的site-packages D:\Python27\Lib\site-packages 3.直接在命令提示符中输入pyinstaller -F 文件名.py 注意F要大写 4. exe在dist文件夹里面&#xff0c;如果你还用到了外部的文件…

小程序群发模板消息

QQ技术交流群 173683866 526474645 欢迎加入交流讨论&#xff0c;打广告的一律飞机票 场景&#xff1a; 微信小程序一键群发模板消息&#xff08;针对所有使用过小程序的用户&#xff09;&#xff0c;发送消息提醒用户&#xff0c;进入指定页面。 实现步骤&#xff1a; 利用…

bat启动/停止oracle服务

自己的电脑比较慢&#xff0c;尤其装了oracle10g后&#xff0c;服务开启和关闭用bat文件操作省事点 开启服务 echo offnet start OracleServiceORCLnet start OracleDBConsoleorclnet start OracleOraDb11g_home1TNSListenernet start OracleOraDb11g_home1iSQL*Plus pause 停止…

docker使用mongo_如何使用Docker在AWS上部署Mongo:初学者的权威指南

docker使用mongo为什么需要这个&#xff1f; (Why you need this?) 因为JS Python Mongo 完整的数据开发 (Because JS Python Mongo full data development) I am a Meteor developer. More precisely I use Vulcan.js, but that’s a whole other story. Meteor is a fu…

git命令每次都要输入账号密码解决方法

QQ技术交流群 173683866 526474645 欢迎加入交流讨论&#xff0c;打广告的一律飞机票 1. 打开项目cmd , 打开方式 - 进入项目的文件目录,在目录中输入 cmd 2.在命令行输入命令 git config --global credential.helper store 3.在命令行输入命令 git pull 意思是创建一…

Linux C中strcpy , strncpy , strlcpy 的区别

strcpy ,strncpy ,strlcpy的用法 好多人已经知道利用strncpy替代strcpy来防止缓冲区越界。 但是如果还要考虑运行效率的话&#xff0c;也许strlcpy是一个更好的方式。 1. strcpy strcpy 是依据 /0 作为结束判断的&#xff0c;如果 to 的空间不够&#xff0c;则会引起 buffer ov…

入职后发现公司是外包全职_我如何通过全职工作,伴侣和3岁的双胞胎男孩打造产品...

入职后发现公司是外包全职by Courtney通过考特尼 我如何通过全职工作&#xff0c;伴侣和3岁的双胞胎男孩打造产品 (How I built my product with a full-time job, partner and 3 year old twin boys) If you’ve opened this article then I’ll assume that you’re either …

Java NIO中的Buffer

简介 Buffer缓冲区&#xff0c;首先要弄明白的是&#xff0c;缓冲区是怎样一个概念。它其实是缓存的一种,我们常说的缓存&#xff0c;包括保存在硬盘上的浏览器缓存&#xff0c;保存在内存中的缓存&#xff08;比如Redis、memcached&#xff09;。Buffer是把数据保存在内存中&a…

编写高质量代码改善C#程序的157个建议——建议86:Parallel中的异常处理

建议86&#xff1a;Parallel中的异常处理建议85阐述了如何处理Task中的异常。由于Task的Start方法是异步启动的&#xff0c;所以我们需要额外的技术来完成异常处理。Parallel相对来说就要简单很多&#xff0c;因为Parallel的调用者线程会等到所有的任务全部完成后&#xff0c;再…

VS Code – No source control providers 解决方法

QQ技术交流群 173683866 526474645 欢迎加入交流讨论&#xff0c;打广告的一律飞机票 1.点击IDE左侧的搜索 2.在搜索中输入 git.enabled 3.点击Open Serrings 4.在Settings中的搜索框输入 git.enabled 5.把它下方的三个选项User Workpace broadband-h5(项目名称) 的Git en…