摘要：
引子 在 Canvas 显示模糊问题 中解决了在高清显示屏上模糊的问题，最近碰到了绘制直线的情况，使用了同样的方案，一开始觉得影响不大，但时间长了，发现非高清屏幕上，直线模糊的感觉越来越明显，就去找了下资料，进行了处理。 Origin My GitHub 问题 这是问题重现页面。 在网上同样可以找同 阅读全文
摘要：
引子 在玩游戏的时候，碰到一个交互效果：背景一张看起来黑白的图，然后用擦除的交互，让图像变的有颜色。也想试试做这个效果，首先想到的是那个黑白的图是怎么形成的，于是就查资料，找到了用 Canvas 转换的方法。 Origin My GitHub 思路 看起来是黑白的图像，其实是灰度图像，进一步说明见图 阅读全文
摘要：
引子 在测试 canvas 文字显示的时候，发现坐标设为(0,0)，文字显示会有问题。 Origin My GitHub 文本坐标(0,0)显示问题 刚开始本以为使用 canvas 的方法不对，尝试改变坐标后，发现又可以显示。这是问题示例，扫描访问二维码如下。 查询资料，发现了类似的问题，原因是 c 阅读全文
摘要：
引子 近期的工作中处理图片合并时，碰到图片来源跨域的情况，在此记录。 Origin My GitHub 图片跨域处理 在用 canvas 合成图片时，放在画布里面的图片，有些图片源是另外一个域名，由于同源策略，首先需要在服务配置中添加对应的 Access-Control-Allow-Origin，允 阅读全文
摘要：
引子 近期的工作中，遇到的功能需求，需要控制文字显示行数，超过就省略号显示。 Origin My GitHub 文字换行 一般文字行数控制用 css 就可以实现，但在 canvas 中不行。在网站查询资料，就可以发现需要程序控制文字换行，主要使用到的方法是 measureText()，这个方法会返回 阅读全文
摘要：
引子 近期的工作中，是继 canvas 设置边框问题 之后碰到的第 4 个问题。 Origin My GitHub 图片圆角问题 如果只是想要显示圆角的效果，设置 border-radius 就可以了，但如果要让 canvas 合成的图片显示为圆角，这种 css 方式不行。这是示例，扫描访问二维码如 阅读全文
摘要：
引子 近期的工作中，是继 canvas 显示模糊问题 之后碰到的第 3 个问题。 Origin My GitHub 设置边框问题 这个是示例，扫描访问二维码如下。 在手机上可以看到，设置边框后，图片就模糊了。如果 border 不占用 canvas 的高宽度，就没有那个问题，在画布上画个边框也可以。 阅读全文
摘要：
引子 近期的工作中，是继 canvas 宽高问题 之后碰到的第二个问题。 Origin My GitHub 显示模糊问题 在 PC 浏览器上显示时，没有发现明显的模糊，还可以接受。但在手机上就会有明显的模糊。这是示例，扫描访问二维码如下。 示例中，用 css 控制 canvas 的宽高，里面的图片展 阅读全文
摘要：
引子 在最近的工作中碰到了合成图片的需求，首先想到的便是 canvas，到网上查找了一些资料，大部分也是使用 canvas。因为好久没有实际接触过这方面的东西了，感觉到一些兴奋。预估会收获不少。 Origin My GitHub 宽高问题 因为是在手机上，需要进行不同尺寸的适配，在项目中使用的是 r 阅读全文
摘要：
引子 关于 JavaScript 提升(Hoisting)，一般在实际使用的过程中，只要遵循了“先声明，后使用”的约定，很少会碰到问题。但浏览器引擎中肯定考虑各种情况，经历了这些问题，吃一堑长一智，还是总结一下。 Origin My GitHub 提升 先看下面打印的是什么。 console.inf 阅读全文