留意 drawImage 的坑，Canvas教程大升级

前段时间写了一篇文章容易被 drawImage 搞晕

坑1：在 Safari 浏览器中没有任何报错信息，但是图片渲染不出来；

解决方案：出现这个问题的原因，网上说是 Safari 的 bug，触发条件是图片裁剪时的 width 或 height 超出了原图 width 或 height，比如原图的宽是 300，高 400，裁剪时设置的宽为 300.05，这将导致在 Safari 上绘制不了。所以在绘制之前需要校验宽高，不能超过原图的尺寸。

坑2：在 IE浏览器中报 indexSizeError 错误，图片渲染不出来；

这个其实和坑1差不多，只要尺寸对了，IE 上也就不会报这个错误了。但是需要强调一点，drawImage 这个 API 会抛出异常，在使用这个 API 需要 catch 一下，否则可能会导致你所有的绘制被阻塞。MDN 上关于这个 API 也有说明：

顺便说一件事情，最近对 Canvas 教程做了一次升级，效果大大的增强，我们看下关于 transform 的 demo 效果：

demo 中的代码也有详细的说明：

在绘制过程中可任意切换坐标原点，设置原点为左上角：

目前 demo 中已经完成了不少：

相信用这种方式写出来的教程更通俗易懂。大家加油！！！

教程地址：https://github.com/lefex/FE/tree/master/learn-canvas

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/