这周在切图的时候拿到了 svg，之前自己一直是用 font-icon 的，感觉挺方便的，svg 相比 font-icon 有一些优点（这个以前在网上看到过），本文暂时不展开讲述了。
但是一些图标，在 Element 里自带的 el-icon-xxx 的方式非常统一，其实是根据 class 设置的，我也不喜欢 svg 的插入方式（太硬），所以希望尽可能的让项目中的 font 保持统一。
然后就发现了 svg 没法像 font icon 一样设置 color。
最近斗志非常差，当然很大程度还是自己的锅……这又不是个情感博客我就不细说了……
这周公司里又开始做新的东西了，大概是类似于反向代理，但是授权了私有库的权限，需要做一些限制，比如 GitHub 路径限制为 dist。
最初的时候我们这么验证路径：
CSS 其实还是有很多学问的，上次正好说到了文字的一些效果，干脆就把 CSS Secret 中的文字效果都做一下笔记，还是有很多自己原来不知道的黑科技的。
前一阵在做 Chrome 插件研究了一波文字前景色的问题，最终我们还是把思路望向了描边，又正好最近看了一波《CSS 揭秘》，里面正好讲到了描边的问题。
有个神奇的 text-stroke 属性，如同名字所描述的那样，就是用于文字描边的。
缺点是，它的描边是内描边，占用了字体本身的空间，其二，兼容性太差，这并不是一个标准的属性，目前只支持很少的浏览器，关于它可以阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke
在之前我们使用 Canvas 去计算颜色和反色，之后经过大佬提醒，原来 CSS 本身也是能根据背景色取反显示的。在这里，我们会学习一个新的特征：mix-blend-mode。
引用 MDN 的介绍：
mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。Canvas 性能是一个非常值得关注的问题，这次用 Canvas 也同样遇到了需要性能优化的点：我们在之前使用 Canvas 实现了 background: cover 的效果，但是这导致了 resize 的反复绘制，CPU 使用率飙升。
对于这种场景，MDN 中的解释是「在离屏canvas上预渲染相似的图形或重复的对象」。
上次我们在 Canvas 实现根据背景色更改前景色中使用了一个拖动效果，刚开始非常智障的用 Drag & Drop，后来由于我们更关注一个即时的反馈，所以用 mousedown / mousemove / mouseup。
最初我们绑定 mousemove 在待拖动的 element 中，结果在移动中如果速度过快，会导致 mousemove 离开 element，于是我们把 mousemove 改绑到 document 中。
这样的效果其实仍然有些卡，或者说移动的延迟，尽管最终会到达鼠标所在的位置，高速移动时却不时刻在鼠标下面。之后我们用捕获来代替默认 addEventListener 的冒泡阶段触发：
之后，如果需要在移动时取消所有鼠标的响应时间，可以通过调整 pointer-events 样式来修改，在变更拖动状态时修改 body 的 style 即可。
在 Chrome 插件的开发中，我们遇到了需要定时提醒的功能，Chrome 官方推荐的 Alarms + 事件页面的做法，之前我也发过：Chrome 插件开发：Alarms 定时与事件页面，起到了计划任务的效果，但是后来我们发现了一个奇怪的问题：计划任务有时执行，有时不执行，有时会延迟执行，而且延迟可以多达几个小时。
这个 bug 很奇怪，最初收到反馈是最近一个星期，我以为是最新更新了什么代码，结果看了一下 Git Log 并没有改动这一段代码，也没有增加其他 Chrome 提供的 API 的调用，理论上是不受影响的。
上回我们实现了 background 的效果，但是我们的代码只能达到一个填充缩放的效果，在不同的窗口大小，会导致图片的变形。如果是 background:cover 的效果则相当理想，它相当于需要我们把大的那一边居中对齐。
这里我们用到了使用图像 Using images 中的切片示例，简单的展示了如何处理：
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)sx / sy / sWidth / sHeight 是对原图的操作，对于切下来的图片，dx / dy / dWidth / dHeight 是切好的图像对于画布的相对操作。
上一回我们说到用 Canvas 去渲染图像，但是在高分屏中，我们会发现，同样的大小，在高分屏上显示的并不清晰，这个 demo 表示的非常清楚：https://jsfiddle.net/csvwolf/3gvs44vw/
实际上我们在屏幕中看到的都是逻辑像素，但对于设备中元素的实际像素，是逻辑像素 * 设备像素比
，也可以叫做物理像素。
实际上在 Canvas 绘制时，也需要绘制实际像素，再进行画布的缩放。
在 demo 中已经有了方案，先绘制逻辑像素 * 设备像素比大小的画布，用 CSS 把样式大小调整，这样实际上是把 canvas 像素点压缩到指定尺寸，但是这样字会变小，我们还需要利用缩放放大设备像素比倍的尺寸，让尺寸恢复正常。
这样一个支持高分屏的渲染就做完了。
接下来我们考虑，如果我们支持完高分屏，图片像素的坐标要怎么选定：答案是要扩大像素比倍进行选择，因为画布的像素点总数没有变化。
很惭愧，一点微小的实践经验，时间有限，就说这么多。