60 行代码实现摸鱼神器：用浏览器小图标摸鱼！

**前言** 

摸鱼是现代打工人必备的技能，但要摸得优雅、摸得有水平，还需要一些小工具的帮助。今天，我就来教你用 60 行代码快速实现一个浏览器摸鱼神器，让你在老板的眼皮子底下也能轻松摸鱼。

**工具准备** 

- 浏览器（任意）
- 文本编辑器（如记事本、Sublime Text 等）
- 60 行代码（见文末）

**实现步骤** 

1. **动态加载 JS** 

```javascript
var script = document.createElement('script');
script.src = '//cdn.jsdelivr.net/npm/canvas2svg@1.0.1/dist/canvas2svg.min.js';
document.head.appendChild(script);

2. JS 加载 Video

var video = document.createElement('video');
video.src = '//vjs.zencdn.net/v/oceans.mp4';
video.autoplay = true;
video.muted = true;
document.body.appendChild(video);

3. Canvas 给 Video 截图

var canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0);

4. 设置 Icon

var link = document.createElement('link');
link.rel = 'icon';
link.href = canvas.toDataURL('image/png');
document.head.appendChild(link);

后续

以上代码只是摸鱼工具的基础功能，大家可以根据自己的需求进一步扩展，比如添加声音控制、视频控制、定时截图等功能。

结语

希望这个小工具能给大家带来欢乐，也希望大家能用它来合理摸鱼，不要影响工作。

完整代码

var script = document.createElement('script');
script.src = '//cdn.jsdelivr.net/npm/canvas2svg@1.0.1/dist/canvas2svg.min.js';
document.head.appendChild(script);

var video = document.createElement('video');
video.src = '//vjs.zencdn.net/v/oceans.mp4';
video.autoplay = true;
video.muted = true;
document.body.appendChild(video);

var canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0);

var link = document.createElement('link');
link.rel = 'icon';
link.href = canvas.toDataURL('image/png');
document.head.appendChild(link);