神奇的canvas——巧用 canvas 为图片添加水印

代码地址如下：
http://www.demodashi.com/demo/11637.html

很久之前写过一篇关于 canvas 的文章，是通过 canvas 来实现一个绚丽的动画效果，不管看过没看过的小伙伴都可以直接猛戳下面的链接直达这篇文章哦！

因为之前很多篇都是偏向理论的，所以这次决定上点实际的内容——通过 canvas 为图片添加自定义水印，并且在文章末尾也会附上源码。下面进入正文~~~

添加水印的原理

原理很简单，主要分为下面几步

1. 将需要添加水印的图片绘制到 canvas 上
2. 将水印图片绘制到 canvas 上
3. 将 canvas 的内容导出为图片

使用到的 canvas 的 api

// 获取当前 canvas 的上下文环境，用来操作在 canvas 上绘制内容
// 
const ctx = canvas.getContext('2d')

// 向 canvas 上绘制图片
// image 为一个图片对象