HTML5 新特性
html5新特性
神奇大叔
这个作者很懒,什么都没留下…
展开
-
canvas 抗锯齿|图片模糊
【代码】canvas 抗锯齿。原创 2023-07-10 16:19:56 · 3676 阅读 · 0 评论 -
canvas 图片跨域
【代码】canvas 图片跨域。原创 2023-07-10 15:08:06 · 854 阅读 · 1 评论 -
h5 mutationObserver监听
能够提供对DOM树更细致的监听 (1)创建一个观察器实例并传入回调函数 const observer = new MutationObserver(callback); 回调函数:fn(改动信息集合,observer实例)(2)以上述配置开始观察目标节点 observer.observe(dom节点,{监听的DOM配置}); 配置: { attributes: true, 观察属性变动 childList: true, 观察子节点变化 subtree:原创 2021-03-28 14:23:26 · 431 阅读 · 0 评论 -
WebSocket 前后端实时监听推送
1、安装 cnpm install ws --save2、使用 (1)后台开启监听 const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 监听端口 }); wss.on('connection',(clinet)=>{ 接收前台发送的数据 client.on('message',(msg)=>{ msg为后台接收数据 })原创 2020-10-22 23:08:07 · 4883 阅读 · 0 评论 -
canvas 粒子效果
用到了underscore.js框架通过类来生成和改变球的位置通过定时器来清屏后添加球<html><head> <meta charset="utf-8"> <title></title> <script src='js/underscore.js'></script> <style>...原创 2020-01-15 20:32:35 · 245 阅读 · 0 评论 -
canvas 图片绘制、视频绘制
canvas canvas中绘制图片: ***必须等到图片加载完成后*** 方法(必须等到图片加载完成后即): img对象.onload=function(){ bi.drawImage(img对象,x坐标,y坐标); bi.drawImage(img对象,x坐标,y坐标,width,height); bi.drawImage(img对象,裁切x坐标,裁切y坐标,裁切wi...原创 2020-01-15 14:42:44 · 658 阅读 · 0 评论 -
canvas 像素操作
创建像素块 let imgData=ctx.createImageData(100,100); 创建100*100像素 let imgData=ctx.getImageData(10,10,50,50); 赋值已有像素 let imgData=ctx.createImageData(imgData); 尺寸相同的新ImageData对象(不会复制图像数据)设置像素块样式 对于ImageData对象中的每个像素,都存在着四方面的信息,即RGBA值: R - 红色 (0-255) G - 绿色原创 2021-07-23 12:08:08 · 414 阅读 · 0 评论 -
canvas 图形剪裁clip、缩放、旋转、位移translate、变换矩阵transform
剪裁 根据当前所绘制的图形,对之后的所有图形进行剪裁,在这之后的所有图形在裁剪区域才显示,在这之前的不受影响 ctx.clip()效果图第一次剪裁第二次剪裁第三次剪裁第四次剪裁代码示例:// 绘制第一个圆 let cx=200;let cy=300;let radius=100;ctx.beginPath(); ctx.fillStyle = 'red'; ctx.arc(cx, cy, radius, 0, Math.PI * 2, false); ctx.fi原创 2021-07-22 20:27:32 · 939 阅读 · 0 评论 -
canvas 圆形、椭圆、文本
canvas 圆形绘制 1、bi.arc(圆心x,圆心y,半径r,开始弧度,结束弧度,false); bi.arc(圆心x,圆心y,半径r,结束弧度,开始弧度,true); (1)true:先开始结束后开始 (2)false:先开始后结束 (3)弧度:0-2*Math.PI自动转换成弧度; 0代表0度,1代表180度 (4)都是顺时针绘制 (5)0表示水平右边点,0...原创 2020-01-15 11:36:07 · 531 阅读 · 0 评论 -
canvas 路径的绘制
canvas 路径的绘制 1、设置笔触点(落笔点)坐标; bi.moveTo(x,y);默认左上角顶点 2、设置笔触点路径(可多条路径); bi.lineTo(x,y); 3、设置笔触颜色; bi.strokeStyle='颜色' 4、笔触绘制; bi.stroke(); 若路径是封闭图形 5、设置填充颜色(只是设置不填充); bi.fillStyle='颜色'; 6、开始封闭...原创 2020-01-15 10:40:17 · 731 阅读 · 0 评论 -
canvas 基本绘制、矩形、渐变、阴影、全局透明度、图层、保存还原绘图状态
canvas 用来'替代'flash等其他用于做动画或游戏的插件的一个标签 1、可以理解为div,提供一个区域用来绘制图形 2、习惯在标签上对其大小进行设置,而不是css或js,并且标签中添加文本<canvas width='xxpx' height='xxpx'>您的浏览器不支持canvas标签,请变更支持canvas的浏览器</canvas> 原因:支持ca...原创 2020-01-14 22:22:15 · 1008 阅读 · 0 评论 -
获取用户多媒体设备 视频、截图
getUserMedia() 1、h5中为了更好的获取用户设备,以便信息采集在window.navigator对象中,提供了getUserMedia()的方法来开启用户多媒体设备 2、通常需要canvas标签来配合,是为了获取实时图像采集功能 兼容性写法 navigator.getUserMedia=navigator.getUserMedia||navigator.webkit...原创 2020-01-14 17:38:56 · 260 阅读 · 0 评论 -
h5 新增本地存储localStorage、sessionStorage
localStorage 用户不主动删除永久存在,域名区分sessionStorage 浏览器关闭时删除 操作: 写入: localStorage/sessionStorage.setItem('key','value'); 读取: localStorage/sessionStorage.getItem('key'); 删除: localStorage/sess......原创 2020-01-13 22:44:03 · 979 阅读 · 1 评论 -
FileReader预读取文件/图片
FileReader 1、是h5中新增的类,用来对input中type='file'类型进行处理的类 2、能够对上传的文件进行预先读写,实现预览效果 文件读写是三种方式: 1、文本读取 2、图片url读取(读取结果即为img元素的src属性) 3、二进制流读取 用法: var fileReader=new FileReader(); 文本 fileRead...原创 2020-01-14 15:54:07 · 369 阅读 · 0 评论