Canvas 原生实现图片涂抹打马赛克功能 就是通过创建多个canvas,一个用来绘制原图,一个用来绘制全马赛克图,一个用来绘制笔迹或者叫打码的区域,最后一个canvas用来将三个canvas绘制到一个canvas之上。
React全Hook项目实战在线聊天室历程(完结):删帖功能 前情提要:React全Hook项目实战在线聊天室历程(一):基本功能React全Hook项目实战在线聊天室历程(二):引用与话题功能React全Hook项目实战在线聊天室历程(三):加个音乐直播?管理员的权限只要是在线提供服务的网站一定会有管理员的存在,那我们也给聊天室加一个管理员,不过简单一些,这个管理员只有删帖的功能。实现思路为了简单,直接使用SubmitContainer来作为登录窗口,后端根据“tag”属性是否等于特定字符串,来判断前端发来的消息是否是登录的账号密码。登录成功后,后端生
A*算法JS实现 A*寻路算法就是启发式探索的一个典型实践,在寻路的过程中,给每个节点绑定了一个估计值(即启发式),在对节点的遍历过程中是采取估计值优先原则,估计值更优的节点会被优先遍历。所以估计函数的定义十分重要,显著影响算法效率。<html><head></head><body> <canvas id="canvas" width="800" height="800"></canvas> <script>
Unit8Array 转 Unit16Array vat u8 = new Unit8Array(data);const buf = Buffer.from(u8)const u16 = new Uint16Array(buf.buffer, buf.byteOffset, buf.byteLength / Uint16Array.BYTES_PER_ELEMENT);
React全Hook项目实战在线聊天室历程(三):加个音乐直播? 前情提要:React全Hook项目实战在线聊天室历程(一):基本功能React全Hook项目实战在线聊天室历程(二):引用与话题功能正文聊天应该有什么?背景音乐,茶与酒,零食,后两个我是没法实现了,但是我们可以给我们的在线聊天室加一个背景音乐的功能。初步设想就是写好一堆音乐的外链在前端,然后让它自动播放,但是这样没有背景音乐的感觉,因为大家听到的歌都不一样呀。那么能不能做一个“直播”呢,让大家听到的是同一首歌,同一个进度?通过查阅资料,我大概找到两个方法,一个是用RTMP协议+ffmpeg推流
jQuery 利用其 AJAX 下载后端返回的 application/octet-stream 二进制数据 业务场景需要用POST传输文件的筛选条件,post的数据格式需要时 application/json,那么就不能使用<Form>元素来模拟POST1,因为form元素的contentType只能设置为application/x-www-form-urlencoded, multipart/form-data, text/plain,这三种2。设置form enctype属性指定为application/json,最后还是会强制的设置为“Content-Type:application/x-w
文字与符号自动换行 两个关于文字换行的CSS属性:1.word-wrap.它有两个属性值:normal.默认情况,表示单词不自动换行break-word.表示强制换行2.word-break.它有三个属性值:normal.默认情况break-all.单词到边界时,下个字母自动到下一行keep-all.表示单词不断一般用下面的两行就行。word-wrap: break-word;word-break: keep-all;...
js ResizeObserver 监听 DOM元素宽度高度改变 let a = document.getElementById('a')let obverser = new ResizeObserver(entries => { for (let entry of entries) { console.log(entry.contentRect.width) }})obverser.observe(a)注意ResizeObserver 这是一个实验中的功能
利用AudioContext与MediaDevices实现实时的音频可视化 书接上文,上一篇博客我们知道了怎么通过MediaDevices获得用户的麦克风数据。这篇博客我们就实现将用户的音频数据实时的绘制出来。<!DOCTYPE html><head></head><body> <canvas id="canvas" width="500" height="500"></canvas> <script> var constraints = { audio: tr
如何使用 javascript 获取语音数据并播放 该网站想要使用你的麦克风在我们开发网页的时候,偶尔会有需要用户录音的情况。那么就需要用到这个API:navigator.mediaDevices.getUserMedia一调用这个方法,一般浏览器就会弹出标题的这句话,这是在问用户索要权限。该方法可以问用户索取麦克风以及摄像头的权限,不过这里我们就只需要麦克风就足够。var constraints = { audio: true, video:false };var promise = navigator.mediaDevices.getUserMe
Web Animation API 以及 实现点击后元素抖动消失 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
Vue3教程:英雄指南(四) 前言最近在看Angular的文档,发现Angular官网的英雄指南的教程挺有意思的,能比较好的一步一步教别人搭建一个项目。最近Vue3也比较火,决定用Vue3仿造Angular的英雄指南写一个完整的教程,也算是一个对自己知识的梳理吧,顺便学习一下Vue3的新特性。由于笔者的知识有限,如果文中有任何错误,希望读者在评论区中直接指出来。VUE版本 3.0.2 Vite版本1.0.0-rc.8之前的内容请看:Vue3 教程:英雄指南(一)Vue3 教程:英雄指南(二)Vue3 教程:英雄指南(三)
Vue3教程:英雄指南(三) 前言最近在看Angular的文档,发现Angular官网的英雄指南的教程挺有意思的,能比较好的一步一步教别人搭建一个项目。最近Vue3也比较火,决定用Vue3仿造Angular的英雄指南写一个完整的教程,也算是一个对自己知识的梳理吧,顺便学习一下Vue3的新特性。由于笔者的知识有限,如果文中有任何错误,希望读者在评论区中直接指出来。VUE版本 3.0.2 Vite版本1.0.0-rc.8之前的内容请看:Vue3 教程:英雄指南(一)Vue3 教程:英雄指南(二)组合式API组件不应该直接获
Vue3教程:英雄指南(二) 前言最近在看Angular的文档,发现Angular官网的英雄指南的教程挺有意思的,能比较好的一步一步教别人搭建一个项目。最近Vue3也比较火,决定用Vue3仿造Angular的英雄指南写一个完整的教程,也算是一个对自己知识的梳理吧,顺便学习一下Vue3的新特性。由于笔者的知识有限,如果文中有任何错误,希望读者在评论区中直接指出来。VUE版本 3.0.2 Vite版本1.0.0-rc.8之前的内容请看Vue3教程:英雄指南(一)编写子组件此刻,Heroes.vue同时显示了英雄列表和所选英雄的详
Vue3 教程:英雄指南(一) 前言最近在看Angular的文档,发现Angular官网的英雄指南的教程挺有意思的,能比较好的一步一步教别人搭建一个项目。最近Vue3也比较火,决定用Vue3仿造Angular的英雄指南写一个完整的教程,也算是一个对自己知识的梳理吧,顺便学习一下Vue3的新特性。由于笔者的知识有限,如果文中有任何错误,希望读者在评论区中直接指出来。Vite创建项目Vite. 是一个基于 Vue3 单文件组件的非打包开发服务器。使用Vite与使用Vue-CLI创建的Vue项目相比,Vite是使用原生的ES模块导入,能提
React三子棋教程后续练习 1. 在游戏历史记录列表显示每一步棋的坐标,格式为 (列号, 行号)。game.state.history中不仅需要记录棋盘,还需要记录此步落子的坐标class Game extends React.Component { // 修改Game构造函数中的history constructor(props) { super(props) this.state = { history: [{ squares: Array(9).fill(null),
一键切换壁纸为Bing首页图片(Python实现) 一键切换壁纸为Bing首页图片一把梭代码# 一把梭代码import requestsimport reimport sysimport osfrom PIL import Imageimport win32gui, win32con, win32api# 访问今日BINGhtml = requests.get("https://cn.bing.com/").text# Bi...
ubuntu16.04搭建web服务器 本篇文章来源于 Linux公社网站(www.linuxidc.com) 原文链接:https://www.linuxidc.com/Linux/2017-01/139570.htm推荐:https://www.linuxidc.com/Linux/2016-10/136327.htm1.打开ubu...