JS中canvas画布绘制中如何实现缩放,位移,旋转

JavaScript030

JS中canvas画布绘制中如何实现缩放,位移,旋转,第1张

cxt.scale(2,2) 缩放的是整个画布,缩放后,继续绘制的图形会被放大或缩小。ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置x: 添加到水平坐标(x)上的值 y: 添加到垂直坐标(y)上的值 发生位移后,相当于把画布的0,0坐标 更换到新的x,y的位置,所有绘制的新元素都被影响。 位移画布一般配合缩放和旋转等。context.rotate(angle) 方法旋转当前的绘图 注意参数是弧度(PI) 如需将角度转换为弧度,请使用 degrees*Math.PI/180 公式进行计算。

性能差距还是很大的特别是在移动设备上,因为大家都知道浏览器在处理这两种样式时的流水线不同。position更新进行 layout 重计算。而translate只需要对本元素的几何数据点做偏移就好了。

不过性能最优的方式还是要为被拖拽的那个元素触发composite layer(可以叫它合成层),因为现在浏览器一般都是 合成化渲染,并且大部分 光栅化(就是把元素形状的几何数据描述变成像素描述的过程,可以理解成矢量变成位图)过程都是在CPU上进行的,如果不把被拖拽的那个元素触发成为 合成层 那么CPU就会重复的paint这个元素,这是不合理的(CPU paint的过程比较耗时),所以应该让CPU尽量少的paint这个元素,最好只paint一次,之后的拖拽(也就是位移,甚至是旋转啊、缩放啊等这些仿射变换) 都可以直接交给GPU在合成(composited)的时候来做,这也就是所谓的硬件加速机制。

合成过程就是把几个合成层(一个合成层可以是 一个元素或多个元素组合经过CPU 光栅化后得到的图片)根据各个层的几何顶点信息、矩阵描述、透明度、blend效果等信息使用GPU进行重新的光栅化渲染到一张直接投影到屏幕上的图片上(帧缓冲区 framebuffer),然而这里的光栅化是非常快的,不同于CPU的那个光栅化的过程。原因大致如下:

一、因为这个时候的渲染只是把一张现成的位图合成到一起(就像纹理贴图,可以简单理解成像素值的简单计算和拷贝)。而不像CPU光栅化,它是将非常复杂的几何数据(是由浏览器分析dom的css样式所得到的)通过一系列复杂的逻辑计算后得到一个像素最后得到一张图片。

二、因为GPU有非常多个处理单元在并行的处理这些简单的渲染,它的计算吞吐量是很大的。而CPU的处理单元非常少,做强逻辑的计算非常适合,但是做这种简单的加减乘除计算不如GPU快(人多力量大)。