首页 > 代码库 > IE下及标准浏览器下的图片旋转(二)—— Canvas(1)

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

 

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

      IE下及标准浏览器下的图片旋转(一)——滤镜,CSS3

 

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:

    <canvas id="img_box" width="400px" height="200px"></canvas>

 

    效果如图:

 


      稍微讲解下代码:

      (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:

    <canvas id="img_box" width="120px" height="90px"></canvas>

 

    效果如图:

 

 

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

 

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

 

    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/2);
        canvas.translate(0,-90);
        img.src = ‘12.jpg‘; 
    })

 

    css:

    #img_box { background: #e5e5e5; }

 

    html:

    <canvas id="img_box" width="90px" height="120px"></canvas>

 

    效果如图:

 

      如果我们需要多次旋转,则需要在每次旋转前将原点复位到原始状态。例如我们进行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:

    window.onload = function(){
        var canvas = document.getElementById("cv");

        canvas.height = 250;
        canvas.width = 400;

        var context = canvas.getContext("2d");
        context.save();

        var img1 = new Image(); 
        img1.onload = function(){ 
            context.translate(90,0);
            context.rotate(Math.PI/2);
            context.drawImage(img1,0,0); 
            context.restore();      
        } 
        img1.src = ‘12.jpg‘; 
        
        
        var img2 = new Image(); 
        img2.onload = function(){ 
            context.drawImage(img2,0,0);   
        } 
        img2.src = ‘13.jpg‘;     
    };

 

    css:

    #cv { background: #e5e5e5; }

 

    html:

    <canvas id="cv"></canvas>

 

    效果如图:

 

 

      如果我们去掉 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)

 

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