html5 canvas实现给图片添加平铺水印

最近项目中遇到一个需求,需要把一张图片加上平铺的水印 类似这样的效果 首先想到的是用canvas完成这种功能,因为我之前也没有接触过canvas,所以做这个功能的时候,就是一步一步的摸索中学习,过程还是挺nice的,接下来跟我一步步来实现这个功能以及发现一些canvas的坑吧。 因为这个功能需要的都是一些canvas基础的api,也不涉及什么原理性的问题,这里我就直接贴js代码 var img = new Image(); // 因为我项目中的业务是,要把淘宝的图片添加水印,所以这里就放一个淘宝商品的主图 img.src = 'https://gd4.alicdn.com/imgextr