张坤的博客

介绍 HTML5 提供了专门的拖拽与拖放的 API，目前各浏览器都已支持，包括 IE。HTML 拖放（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。 事件类型 事件 On 型事件处理程序 触发时刻 drag ondrag 当拖拽元素或选中的文本时触发。 dragend ondragend 当拖拽操作结束时触发 (比如松开鼠标按键或敲 Esc 键)。 dragenter ondragenter 当拖拽元素或选中的文本到一个可释放目标时触发。 dragleave ondragleave 当拖拽元素或选中的文本离开一个可释放目标时触发。 dragover ondragover 当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）。 dragstart ondragstart 当用户开始拖拽一个元素或选中的文本时触发。 drop ondrop 当元素或选中的文本在可释放目标上被释放时 ...

介绍alert、confirm、prompt 对话框： 不能自定义样式和复杂的内容。 会阻塞页面渲染和脚本的执行，直到这个对话框被点击。 所以在开发的过程中，我们一般根据自己自己的需求来自定义或者使用第三方的 UI 库。随着浏览器 API 的不断更新，我们现在可以很容易地使用浏览器的原生能力来实现自己想要的需求。比如 HTML5 中的 <dialog> 元素和最新的 Popup API。 dialog HTML 5.2 推出了一个新的原生模态对话框元素 <dialog>，目前除了 IE，其他浏览器都已支持。<dialog> 元素默认定义了基本的用户代理提供的样式，如自动边距、粗边框样式等，并且可以使用 CSS 自定义。它还提供了一系列的专有属性、方法和事件： open 属性用来标识和切换对话框的显示。 returnValue 属性用来获取对话框的值。 close() 方法用来关闭对话框。可选传入类字符串参数，用来更新对话框的 returnValue。 show() 方法用来不带遮罩显示这个对话框，即：打开这个对话框之后依然可以和其他内容进行交互 ...

介绍给图片添加水印可以帮助网站或作者保护自己的版权，或防止内容被别人利用。给图片添加水印分为添加文字水印和添加图片水印，水印一般都做成半透明的，这样不至于影响原图内容的浏览。Canvas 图片水印合成与 Canvas 实现图片压缩 原理基本相同： CanvasRenderingContext2D.drawImage(image, dx, dy, dWidth, dHeight) 方法可以从页面 DOM 元素作为图像源来根据坐标和大小重新绘制该图像。 HTMLCanvasElement.toDataURL() 方法支持导出为 base64 字符串。 文字水印 首先创建一个空的 canvas 元素，并获取其上下文。12const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d'); 获取页面上需要合成水印的 img 元素，或者根据一个 File 或 Blob 对象，创建一个空的 img 元素，将其 src 设为 File 或 Blob 对象的 ...

图片压缩原理 CanvasRenderingContext2D.drawImage() 方法可以从页面 DOM 元素作为图像源来根据坐标和大小重新绘制该图像。 HTMLCanvasElement.toDataURL() 和 HTMLCanvasElement.toBlob() 方法支持导出为 base64 字符串或 Blob 对象。 CanvasRenderingContext2D.drawImage()123drawImage(image, dx, dy)drawImage(image, dx, dy, dWidth, dHeight)drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) image 绘制到上下文的元素。允许任何的画布图像源，包括 canvas、img、svg、video 元素和 ImageBitmap 对象等。 dx, dy, dWidth, dHeight 这几个属性表示在 canvas 画布上指定一片区域用来放置图片，dx、dy 指定图片的左上角在 canvas 上的坐标，d ...

CSS SpritesCSS Sprites 翻译为 CSS 贴图、图像精灵（sprite，意为精灵），指图像合并，通过 CSS background-position 属性定位图像的一部分来使用，使得使用一个图像文件可以替代多个小文件。但是有很多缺点： 不便于维护和扩展、定位不精确等问题，例如：在后期项目迭代中我们需要删除其中一个小图，那么排在它后面的小图位置都要移动，需要再次修改 CSS 样式，或每次都要打开 PS 删除某图标再导出。 无法修改小图颜色，要 UI 设计师调整后替换。 在移动端的大屏手机图标会模糊。 SVG Sprites类似于 CSS 中的 Sprite，图标图形整合在一起，实际呈现的时候准确显示特定图标。 SVG Sprites 使用 xlink:href="#id" 的方式获取，便于维护和扩展，因为小图的 id 不会随便改动; 方便改变图片颜色，通过设置 fill: 颜色值，随意改变小图颜色; IE9 以上支持。 symbol目前，SVG Sprite 最佳实践是使用 <symbol> 元素。<symbol> ...

介绍可缩放矢量图形（Scalable Vector Graphics，SVG）是由万维网联盟（W3C）自 1999 年开始开发的开放标准。SVG 能够优雅而简洁地渲染不同大小的图形，并可以和 CSS、DOM 和 SMIL 等其他网络标准无缝衔接。它实现了 DOM 接口，这点比 Canvas 与 JavaScript 交互方便。 SVG 可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以转换变形、合成、或者通过滤镜完全改变外观。 和传统的点阵图像模式（例如 JPEG 和 PNG）不同的是，SVG 格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容，无需图形编辑器。 目前，SVG2.0 正在制定当中，它采用了类似 CSS3 的制定方法，通过若干松散耦合的组件形成一套标准。 命名空间作为 XML 的一个方言，SVG 需要在一个命名空间内（is namespaced）。 命名空间声明通过 xmlns（XML Namespaces）属性声明。 这意味着这个 <svg> ...

介绍<canvas> 最早由 Apple 引入 WebKit，用于 Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。Canvas API 提供了一个通过 JavaScript 和 HTML 的 <canvas> 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas 适合绘制大数据量图形元素的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也适合实现某些视觉特效。它还能能够以 png、jpg 或 webp 格式保存图像。Canvas 提供了强大的 Web 绘图能力，所以我们要学会使用它。 效果如下： 步骤 准备一个 canvas 元素。 1<canvas id="drawHeart"></canvas> 获取 canvas 对象和上下文，初始化变量：窗口宽高、爱心和文字总数量、包含爱心和文字的数组，定义爱心图片，图片 src 可以是 base64 字符串类型或者本地图片文件和网络图片链接。 12345 ...

为什么B站的弹幕可以不挡人物为什么B站的弹幕可以不挡人物 这篇文章里面介绍了这个神奇的 mask 属性，我们知道了B站的弹幕可以不挡人物的原理： 视频处理：对有人物出现的每一帧视频画面都由后台 AI 识别后生成对应的 base64 图片，这个图片具有人物的透明轮廓。一张图片也就一两K，不会造成性能负担。 视频画面上设置一个绝对定位元素。 视频播放时由 JS 动态设置绝对定位元素的 mask-image 的 url 地址为当前帧对应的 base64 图片。 mask 属性CSS mask 属性通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。可以使用图像、SVG 或渐变色作为遮罩来做一些特效。它是以下 CSS 属性的简写： mask-image: 使用的图片资源，默认 none。 mask-mode: 根据资源的类型自动采用合适的遮罩模式，默认 match-source（目前只有 Firefox 支持）。 mask-repeat: 类似于 background-repeat 属性，默认 repeat。 mask-position: 和 backgrou ...

介绍SVG SMIL animation 可以很容易实现元素沿着不规则的路径运动动画，但由于其依赖 SVG 元素和 HTML 属性，容易造成复用时的冗余，不利于维护。新 CSS 属性 offset-path 可以看成是其替代方案，它指定了元素的运动路径，并定义元素在父容器或 SVG 坐标系中的定位。 与其相关的几个属性： offset-distance 指定元素沿 offset-path 路径运动的距离，可以是数值或者百分比单位，100% 则表示把所有的路径都跑完了。 offset-position 定义元素的 offset-path 初始位置，类似于属性 background-position。 offset-anchor 指定 offset-path 路径框内的原点，其属性值和 transform-origin 类似。 offset-rotate 定义元素沿 offset-path 路径的角度，默认是 auto，表示自动计算当前路径的切线方向，并朝着这个方向前进。 offset-anchor、offset-distance、offset-path、offset-positio ...

介绍SVG 内容可以通过以下方式进行动画处理： 使用 SVG 动画。SVG 动画文档片段可以描述对文档元素的基于时间的修改，可以定义运动路径，或插入元素的属性和样式属性。这些效果可以链接在一起或触发以响应文档中的其他事件。 使用 CSS 动画。这个 CSS 模块定义了使用关键帧随时间动画化 CSS 属性值的方法。这些关键帧动画的行为可以通过指定它们的持续时间、重复次数和重复行为来控制。 使用 CSS 过渡。此 CSS 模块定义属性以指定 CSS 属性值的更改在指定的持续时间内逐渐发生。 使用 SVG DOM。SVG DOM 被定义为 DOM4 规范的扩展。每个属性和样式表设置都可以通过脚本访问，并且 SVG 提供了一组额外的 DOM 接口来通过脚本支持高效的动画。理想情况下，支持脚本的浏览器也将实现 HTML 中定义的动画帧 API 。 使用 Web Animations API。这个 DOM API 提供了一个脚本接口来触发样式属性和属性的用户代理优化动画，而不需要计算单个帧的值。 SVG 动画通过 SMIL（Synchronized Multimedia Integration ...