![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html5
前端同学
学习为主,兴趣为辅,致力于向前端更深层次发展。
展开
-
svg和canvas的区别
1.可伸缩的矢量图形2.是基于xml进行绘制图形3.svg放大或者改变尺寸情况下图形质量不会有损。4.svg 绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点,1.h5新增属性2.基于js进行绘制图形1、svg每个图形都可以看作是一个对象,如果对象属性发生变化,浏览器可自动重现图形。根据变化自动改变变化部分即可。canvas图形如果绘制完成,不会再得到浏览器的关注。如果图形位置改变,浏览器需要重新绘制。2、canvas依赖分辨率,svg不依赖分辨率。3、canvas不支持事件处理器,svg支持原创 2022-06-27 16:17:03 · 1762 阅读 · 0 评论 -
HTML5的离线储存
离线存储指的是:在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。原理:HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示使用方法: (1)创建一个和 html 同名的 manifest 文件,然后在页面头部加入 manifest 属性:(2)在 cache.manif原创 2022-06-27 14:32:24 · 1570 阅读 · 1 评论 -
canvas 实现图片、页面新增水印
给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。canvas元素其实就是一个画布,我们可以很方便地绘制一些文字、线条、图形等,它也可以将一个img标签里渲染的图片画在画布上。在上传文件到后端的时候,使用input标签读取用户本地文件后得到的其实是一个Blob对象(更精确的说是File对象,特殊的Blob对象);而在页面上展示一个图片使用的是img标签;绘制功能用canvas实现。添加水印的功能需要在img标签、ca原创 2022-06-23 17:44:35 · 1063 阅读 · 1 评论 -
深入理解web Worker
我们都知道js是单线程模型。也就是说一次只能处理一件事情,前面的事情没有完毕,后面的事情要等待前面的事情处理完毕后才能执行。随着多核CPU的出现,我们可以最大限度的利用cpu多核,来提高js的性能。Worker接口可以创建后台任务。即可以给js运行新增线程。用于处理一些耗时、耗费性能的任务(异步的除外)。要解决的问题是:1.解决页面卡死问题。2.发挥多核CPU的优势,提高js性能。1.非同源限制(本地代码如果以盘符的方式打开也不行,因为没有源啦)主线程代码与Worker线程代码必须同源才能一起正常工作。2原创 2022-06-14 17:51:17 · 644 阅读 · 0 评论