Canvas高级应用与优化技巧.pdfVIP

课堂目标

了解一些canvas不太常用，但有时候必不可少的知识点。

掌握canvas常见的优化方法。

图像平滑

使用drawImage()将图像源放大的时候，默认会进行平滑处理。

ctx.imageSmoothingEnabled可以控制图像是否平滑，其默认为true，设置为false便会取消平滑。

放大图像源放大

ctx.imageSmoothingEnabled=truectx.imageSmoothingEnabled=false

用描边的方法绘制一像素的线

问题点：当我们在canvas中使用描边绘制1个像素宽的线段的时候，我们画出来的直线可能是2个像素宽。

解决思路：让线段的端点在像素中间。

实现方法：

ctx.moveTo(0,0.5);

ctx.lineTo(1000,0.5);

或者：

ctx.translate(0.5,0.5)

放大后的示意图

让canvas分辨率适配不同设备

例如：用canvas写出的文字，在有的设备里会显得模糊，有的设备里则会看起来比较清晰。这是canvas没有适配设备分辨率引起的。

//视口宽高（将作为canvas的css宽高）