IE下及标准浏览器下的图片旋转（二）—— Canvas（1）

文章过长，一篇无法保存。

3. canvas

canvas 是html5中的新标签，使用canvas之前我们先看下它的定义：<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。这个标签是用来绘图的，包括2d和3d，拥有很多方法，因为我们只是拿来实现图片的旋转，所以只需要了解其中的3个方法即可，关于canvas的详细使用会写在以后的篇幅中。

先讲下canvas实现旋转图片的原理：canvas标签相当于创建一个画布，不仅可以在上面画图，还可以插入图片，当我们在canvas中插入了图片，并使用其提供的旋转方法对画布旋转，即可实现旋转图片的目的。

canvas画布旋转式围绕圆点进行的，示例如图：

假定蓝色方块是canvas标签，当我们对其内容进行旋转时，是旋转的整个画布，但是canvas本身的位置和大小是不会发生变化的，当内容旋转后如果超出了画布，就会被遮挡住，默认旋转的原点是00坐标，也就是画布的左上角，并且，无论怎样旋转，它的X轴和Y轴都不会改变，即使我们旋转90度或者180 度。会ps的同学可以参考图层旋转，把中心点定在左上角即可。

来看个形象店的图示：

默认旋转90度后，内容全部超出画布，将不会显示，X轴和Y轴不变。如下图所示：

先来个示例：

javascript：

    $(function () {
        var canvas = document.getElementById("img_box").getContext('2d');
        var img = new Image();
        img.onload = function(){
              canvas.drawImage(img,0,0);
        }
        img.src = '12.jpg';
    })

css：

#img_box { background: #e5e5e5; }

html：

效果如图：

稍微讲解下代码：

(1) var canvas = document.getElementById("img_box").getContext('2d');
获取canvas标签并使用2D画图模式

(2) var img = new Image();
创建一个图片对象

(3) img.onload = function(){ }

图片加载完后执行函数

(4) canvas.drawImage(img,0,0);

drawImage()方法允许在canvas中插入其他图像。参数可以使3个（位移）5个（位移，缩放）或9个（位移，缩放，裁剪）。我们用3个就够了，第一个参数是图片地址，第二个是X轴位移，第三个是Y轴位移，我们让图片和原点（0,0）对齐就可以了。

如果我们把canvas的大小设置的和图片大小一样的话，那么久相当于图片充满了canvas画布，上例中我们的图片是120*90，我们把canvas标签的大小也设成120*90就会成这样：

可以看到没有了灰色区域，只有图片。

如果我们要对它旋转就需要用到rotate()方法，rotate(Math.PI)代表顺时针旋转180度，也即是说Math.PI=180度，-Math.PI=-180度，Math.PI/2=90度，以此类推。我们以旋转45度为例：

javascript：

    $(function () {
        var canvas = document.getElementById("img_box").getContext('2d'); ;
        var img = new Image();
        img.onload = function(){
              canvas.drawImage(img,0,0);
        }
        canvas.rotate(Math.PI/4);

img.src = '12.jpg';
})

css：

#img_box { background: #e5e5e5; }

html：

效果如图：

我们可以看到使用rotate()方法方法旋转后，就如前面的原理如所示，canvas标签大小不变，内容会围绕原点（0,0）旋转整个画布。超出的部分会隐藏掉。由此我们可以推断，当旋转90度时，图片会完全看不到。我们需要把图片再拉回来，并且改变canvas标签的大小为图片旋转后的大小，也就是宽高互换。

因此我们需要使用translate()方法重新设定原点位置。以下以90度旋转为例，如有不明白translate()取值的同学，认真揣摩上面关于原点，XY轴的原理图，XY轴不变。

javascript：

css：

#img_box { background: #e5e5e5; }

html：

效果如图：

如果我们需要多次旋转，则需要在每次旋转前将原点复位到原始状态。例如我们进行90度旋转：

canvas.rotate(Math.PI/2);
canvas.translate(0,-90);

当我们再次旋转90度时，需要先复位原点，再旋转：

      canvas.translate(0,90);
      canvas.rotate(Math.PI/2);
      canvas.translate(-120,-90);

完整的顺时针旋转360度代码：

canvas.rotate(Math.PI/2); //顺时针旋转90度
canvas.translate(0,-90); //位移，显示在画布上

      canvas.translate(0,90);   //复位原点（0,0）
      canvas.rotate(Math.PI/2);   //再次旋转90度，此时即是180度
      canvas.translate(-120,-90);   //位移

      canvas.translate(120,90);   //复位原点
      canvas.rotate(Math.PI/2);   //继续旋转90度，此时270度
      canvas.translate(-120,0);   //位移

canvas.translate(120,0); //复位原点
canvas.rotate(Math.PI/2); //继续旋转90度，此时360度，无需位移

当然，我们也可以先改变中心点，然后旋转画布，最后再插入图片，以旋转90度为例：

translate(90,0);canvas.rotate(Math.PI/2);我们看到如果这样的话，translate的数值与之前是不同的，原因在于，之前先旋转，中心点是原点，旋转后图片超出被隐藏，我们需要把中心点移动旋转后的视觉位置，在视觉上是向右向下移动（正数），实际上相对于旋转后的画布是向左向上移动（负数），而先旋转画布的话，我们要提前算好旋转后这个点的位置，然后向右向下移动，因为并未旋转，所以相对于原点向右向下移动与视觉上的移动方向一致，所以是正数。不明白的同学好好体会体会，看看上面的示例图，自己拿个方形的东西转转，呵呵。

如果每次旋转后都需要手动复位原点，这样也有点太复杂了，算起来有点晕，其实大可不必这样，因为canvas给我们提供了一种复位方法save()和restore()。

save()用来保存canvas的状态（注意是canvas画布，而不是我们画的图或者对图片等的操作），restore()用来恢复。restore()总是会寻找离它最近的save()恢复，并且restore()的个数不能多于save()的个数，这个不难理解，你保存10次恢复11次，肯定会出错嘛。

我们看个示例：

javascript：

css：

#cv { background: #e5e5e5; }

html：

效果如图：

如果我们去掉 img1.onload = function(){ }中的context.restore(); 就会变成这样：

我们看到，img1旋转了90度，不加restore()，img2也是旋转90度，加上后img2不受影响，为什么呢？我们往上看，创建canvas画布后，我们就进行了一次save()，这时我们并没有对canvas画布做任何操作，当img1进行旋转后，画布就成为了旋转90度，如果我们直接加入 img2，那么img2也是在画布旋转90的状态下插入的，如果我们使用restore()，那么canvas画布就会恢复到上一次save()状态（注意，是canvas画布恢复，我们对img1进行的操作不会受影响），这时我们再加入img2，就不会受影响了，这是个很关键的使用方法，复杂的画图都要用到多次save()和restore()。

文章过长，一篇无法保存

IE下及标准浏览器下的图片旋转（二）—— Canvas（2）

posted @ 2014-12-03 11:12 K13 阅读(490) 评论(0) 编辑收藏举报

刷新页面返回顶部

IE下及标准浏览器下的图片旋转（二）—— Canvas（1）

公告