canvas基础—图形变换

1、canvas转换方法

1.1canvas转换方法

二、canvas实现图形的中心点旋转

step1:获取canva元素并指定canvas的绘图环境

    var canvas=document.getElementById('canvas');
    var context=canvas.getContext('2d');

step2:在画布（100,100）的位置绘制一个100*100的矩形

context.fillRect(100,100,100,100);

step3:要实现图片的中心旋转，首先我们需要将画布的（0,0）位置移到绘制的矩形的中心点的位置，（即图中（150,150）位置为（0,0）位置），并且以新的圆点为坐标，绘制一个一样大的矩形。如图(为了形象理解，下图是在软件中绘制出来的，在颜色上做了个区分，实际代码里并没有区分颜色，图中（150,150）位新的坐标原点)

context.translate(150,150);
context.fillRect(0,0,100,100);

 step4:接下来我们将矩形旋转45度角（备注：在canvas中，旋转，平移都需要在矩形绘制之前执行），所以接下来我们将代码改成下图所示：

context.fillRect(100,100,100,100);
context.translate(150,150);
context.rotate(90*Math.PI/180);
context.fillRect(0,0,100,100);

step5：此时的圆点位置在（150,150）的位置，我们需要将圆点位置还原成（100,100）的位置，也就是需要向左平移50个像素，向上平移50个像素，如下代码

context.fillRect(100,100,100,100);
context.translate(150,150);
context.rotate(90*Math.PI/180);
context.translate(-50,-50)
context.fillRect(0,0,100,100);

 

 总结：用canvas实现中心旋转，主要有以下几步

1. 第一步：确定中心点

　　　图形的坐标圆点的x轴/y轴+（图形的宽度/高度/2）；

　　　例如：上述例子中，矩形的圆点坐标为（100,100），矩形的宽高为（100,100）；那么圆点的位置则为（100+100/2，100+100/2），即（150,150）

　　 2.第二步：将画布的原点移到中心点的位置

　　 3.第三步：旋转

　　 4.第四步：将画布的原点移动到图形的原点位置

　　 5.第五步：以新的原点为图形的原点坐标，开始绘制图形