2017年9月5日
背景
遇到 Canvas 使用 drawImage() 绘制图形出现锯齿严重的问题。
drawImage()
drawImage() 方法在画布上绘制图像、画布或视频
drawImage() 方法也能够绘制图像时，增加或减少图像的尺寸。
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
原因
小尺寸的图片放大会模糊，是因为像素信息不足，但为何大图片缩小会有锯齿？
我的理解：
缩小图形，相当于主动丢失一些像素信息。那么如何选择要丢弃的信息呢？取决于各类压缩算法。若丢掉了“不该丢”的像素，就会影响到图片质量了。
而 canvas 没有提供特别好的位图插值算法。
措施
- 对半缩小(step-down)
经测试，若依次对半缩小，会比一次性缩小到位要好得多。
弊端，不能随心所欲缩小到指定的长宽，而是只能是原图的倍数缩减。
- imagesmoothingquality
目前好像只有 chrome 支持此属性
context.imageSmoothingQuality = "low|medium|high"
