利用HTML5 canvas旋转图片

最近突然想研究一下js旋转图片的功能。对于之前的实现方式，就不先说了。现在HTML5很不错，主要了解一下HTML5中的图片旋转吧。

实例演示： 

http://www.imqing.com/demo/rotateImg.html

原理：利用canvas对象来旋转。

实现方式：首先创建一个canvas元素，然后把img元素绘入canvas。但是，实际上，这是默认情况，就是图片没旋转时。如果图片要旋转90度的话，就需要先把canvas画布旋转90度后再绘图。

描述如下： （内部旋转原理是这样的，图片的坐标是从左上角开始计算，向右为x正方向，向下为y正方向，在旋转画布canvas时，实际上是这个坐标在旋转，所以最后绘图方式不一样。当时我还用了picpick来测量旋转一定角度后起点坐标，才知道原来旋转是这样的，嘿嘿。）

代码：

 

    "rotateImg('testImg', 'left')">向左旋转
    "rotateImg('testImg', 'right')">向右旋转
    "./test.jpg" id="testImg"/>
  </span></li>
    
    
    
    <li><span>    </span><span class="keyword">function</span><span> rotateImg(pid, direction) {  </span></li>
    
    
    
    <li class="alt"><span>        </span><span class="comment">//最小与最大旋转方向，图片旋转4次后回到原方向 </span><span> </span></li>
    
    
    
    <li><span>        </span><span class="keyword">var</span><span> min_step = 0;  </span></li>
    
    
    
    <li class="alt"><span>        </span><span class="keyword">var</span><span> max_step = 3;  </span></li>
    
    
    
    <li><span>        </span><span class="keyword">var</span><span> img = document.getElementById(pid);  </span></li>
    
    
    
    <li class="alt"><span>        </span><span class="keyword">if</span><span> (img == </span><span class="keyword">null</span><span>)</span><span class="keyword">return</span><span>;  </span></li>
    
    
    
    <li><span>        </span><span class="comment">//img的高度和宽度不能在img元素隐藏后获取，否则会出错 </span><span> </span></li>
    
    
    
    <li class="alt"><span>        </span><span class="keyword">var</span><span> height = img.height;  </span></li>
    
    
    
    <li><span>        </span><span class="keyword">var</span><span> width = img.width;  </span></li>
    
    
    
    <li class="alt"><span>        </span><span class="keyword">var</span><span> step = img.getAttribute(</span><span class="string">'step'</span><span>);  </span></li>
    
    
    
    <li><span>        </span><span class="keyword">if</span><span> (step == </span><span class="keyword">null</span><span>) {  </span></li>
    
    
    
    <li class="alt"><span>            step = min_step;  </span></li>
    
    
    
    <li><span>        }  </span></li>
    
    
    
    <li class="alt"><span>        </span><span class="keyword">if</span><span> (direction == </span><span class="string">'right'</span><span>) {  </span></li>
    
    
    
    <li><span>            step++;  </span></li>
    
    
    
    <li class="alt"><span>            </span><span class="comment">//旋转到原位置，即超过最大值 </span><span> </span></li>
    
    
    
    <li><span>            step > max_step && (step = min_step);  </span></li>
    
    
    
    <li class="alt"><span>        } </span><span class="keyword">else</span><span> {  </span></li>
    
    
    
    <li><span>            step--;  </span></li>
    
    
    
    <li class="alt"><span>            step < min_step && (step = max_step);  </span></li>
    
    
    
    <li><span>        }  </span></li>
    
    
    
    <li class="alt"><span>        img.setAttribute(</span><span class="string">'step'</span><span>, step);  </span></li>
    
    
    
    <li><span>        </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">'pic_'</span><span> + pid);  </span></li>
    
    
    
    <li class="alt"><span>        </span><span class="keyword">if</span><span> (canvas == </span><span class="keyword">null</span><span>) {  </span></li>
    
    
    
    <li><span>            img.style.display = </span><span class="string">'none'</span><span>;  </span></li>
    
    
    
    <li class="alt"><span>            canvas = document.createElement(</span><span class="string">'canvas'</span><span>);  </span></li>
    
    
    
    <li><span>            canvas.setAttribute(</span><span class="string">'id'</span><span>, </span><span class="string">'pic_'</span><span> + pid);  </span></li>
    
    
    
    <li class="alt"><span>            img.parentNode.appendChild(canvas);  </span></li>
    
    
    
    <li><span>        }  </span></li>
    
    
    
    <li class="alt"><span>        </span><span class="comment">//旋转角度以弧度值为参数 </span><span> </span></li>
    
    
    
    <li><span>        </span><span class="keyword">var</span><span> degree = step * 90 * Math.PI / 180;  </span></li>
    
    
    
    <li class="alt"><span>        </span><span class="keyword">var</span><span> ctx = canvas.getContext(</span><span class="string">'2d'</span><span>);  </span></li>
    
    
    
    <li><span>        </span><span class="keyword">switch</span><span> (step) {  </span></li>
    
    
    
    <li class="alt"><span>            </span><span class="keyword">case</span><span> 0:  </span></li>
    
    
    
    <li><span>                canvas.width = width;  </span></li>
    
    
    
    <li class="alt"><span>                canvas.height = height;  </span></li>
    
    
    
    <li><span>                ctx.drawImage(img, 0, 0);  </span></li>
    
    
    
    <li class="alt"><span>                </span><span class="keyword">break</span><span>;  </span></li>
    
    
    
    <li><span>            </span><span class="keyword">case</span><span> 1:  </span></li>
    
    
    
    <li class="alt"><span>                canvas.width = height;  </span></li>
    
    
    
    <li><span>                canvas.height = width;  </span></li>
    
    
    
    <li class="alt"><span>                ctx.rotate(degree);  </span></li>
    
    
    
    <li><span>                ctx.drawImage(img, 0, -height);  </span></li>
    
    
    
    <li class="alt"><span>                </span><span class="keyword">break</span><span>;  </span></li>
    
    
    
    <li><span>            </span><span class="keyword">case</span><span> 2:  </span></li>
    
    
    
    <li class="alt"><span>                canvas.width = width;  </span></li>
    
    
    
    <li><span>                canvas.height = height;  </span></li>
    
    
    
    <li class="alt"><span>                ctx.rotate(degree);  </span></li>
    
    
    
    <li><span>                ctx.drawImage(img, -width, -height);  </span></li>
    
    
    
    <li class="alt"><span>                </span><span class="keyword">break</span><span>;  </span></li>
    
    
    
    <li><span>            </span><span class="keyword">case</span><span> 3:  </span></li>
    
    
    
    <li class="alt"><span>                canvas.width = height;  </span></li>
    
    
    
    <li><span>                canvas.height = width;  </span></li>
    
    
    
    <li class="alt"><span>                ctx.rotate(degree);  </span></li>
    
    
    
    <li><span>                ctx.drawImage(img, -width, 0);  </span></li>
    
    
    
    <li class="alt"><span>                </span><span class="keyword">break</span><span>;  </span></li>
    
    
    
    <li><span>        }  </span></li>
    
    
    
    <li class="alt"><span>    }  </span></li>
    
    
    
    <li><span>

解释：   canvas.width与height就不用解释了吧，应该。rotate应该也不用吧？关键是
drawImage(img, x, y);

其中的x，y是指从哪一点开始画，因为整个坐标系统旋转了，所以，x，y不一样，比如step=1，图片向右旋转了90度，即坐标系旋转了90度，那么起始位置应该是
x = 0,   y=  img.height

其它类似可得。是不是觉得很简单呢？

请看http://www.imqing.com/blog/wp/2012/09/html5-canvas-rotate-p_w_picpath/