灯光

摘要： 在前端开发过程中，调试的时候，我门会使用 console.log 等方式查看数据。但对于图片来说，仅靠展示的数据与结构，是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上，或将图片下载下来进行预览。但这样的调试过程实在是复杂，何不实现一个 console.image() 呢？ 阅读全文

摘要： 有时候，我们需要在网页判断用户是否处与非活跃状态，如果用户长时间没有在页面上进行任何操作，我们则判定该用户是非活跃的。 在 javascript 中我们可以通过监听某些鼠标或键盘相关的事件来判定用户是否在活跃中。 阅读全文

摘要： 笔.COOL 提供了一个功能完备、使用便捷的在线HTML代码编辑和作品分享平台，无论是为了展示你的前端作品、复现 BUG，还是学习其他人的代码，笔.COOL 都是一个非常好的选择。无论你是初入前端的新手还是经验丰富的老鸟，都能在这里找到属于自己的乐趣和价值。 阅读全文

摘要： 可以通过计算每秒 window.requestAnimationFrame 的调用频率来做为 FPS 值。 阅读全文

摘要： 实现说明： 1、先通过 new Image() 载入图片； 2、图片加载成功后使用 drawImage() 将图片绘制到画布上； 3、最后使用 fillText() 函数绘制水印。 下面展示了详细用法 效果展示： 本案例将图片的四个角都加上水印 在线演示 https://bi.cool/bi/P4O 阅读全文

摘要： 实现说明： 在 JS 中 canvas 原生没有支持对文字间距的调整，我们可以通过将文字的每个字符单独渲染来实现。本案例从 CanvasRenderingContext2D 对象的原型链上扩展了一个用于绘制带间距的函数 fillTextWithSpacing()，使用方式与原生 fillText() 阅读全文