html2canvas div 旋转,CSS3图片旋转功能transform:rotate以及Canvas旋转示例

.demo {

width: 100px;

height: 75px;

background-color: yellow;

border: 1px solid black;

margin:20px;

}

#div2 {

transform: rotate(30deg);

-ms-transform: rotate(30deg); /* IE 9 */

-moz-transform: rotate(30deg); /* Firefox */

-webkit-transform: rotate(30deg); /* Safari and Chrome */

-o-transform: rotate(30deg); /* Opera */

}

#div3 {

transform: rotate(90deg);

-ms-transform: rotate(90deg); /* IE 9 */

-moz-transform: rotate(90deg); /* Firefox */

-webkit-transform: rotate(90deg); /* Safari and Chrome */

-o-transform: rotate(90deg); /* Opera */

}

原图

90°旋转后的图片

//canvas旋转图片

var canvas = document.getElementById("canvasId");

var ctx = canvas.getContext("2d");

var img = new Image();

img.src = "http://avatar.csdn.net/5/6/7/1_jslang.jpg";

img.onload = function () {

ctx.save();//保存状态

ctx.translate(200, 200);//设置画布上的(0,0)位置，也就是旋转的中心点

ctx.rotate(45 * Math.PI / 180);

ctx.drawImage(img, -img.width / 2, -img.height / 2);//把图片绘制在旋转的中心点，

ctx.restore();//恢复状态

}

向左旋转

向右旋转

/*

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

实现方式：首先创建一个canvas元素，然后把img元素绘入canvas。

但是，实际上，这是默认情况，就是图片没旋转时。

如果图片要旋转90度的话，就需要先把canvas画布旋转90度后再绘图。

描述如下： (内部旋转原理是这样的，图片的坐标是从左上角开始计算，

向右为x正方向，向下为y正方向，在旋转画布canvas时，实际上是这个坐标在旋转

解释： canvas.width与height就不用解释了吧，应该。rotate应该也不用吧？关键是

drawImage(img, x, y);

其中的x，y是指从哪一点开始画，因为整个坐标系统旋转了，所以，x，y不一样，

比如step=1，图片向右旋转了90度，即坐标系旋转了90度，那么起始位置应该是

x = 0, y= img.height 其它类似可得。

*/

function rotateImg(pid, direction) {

//最小与最大旋转方向，图片旋转4次后回到原方向

var min_step = 0;

var max_step = 3;

var img = document.getElementById(pid);

if (img == null) return;

//img的高度和宽度不能在img元素隐藏后获取，否则会出错

var height = img.height;

var width = img.width;

var step = img.getAttribute('step');

if (step == null) {

step = min_step;

}

if (direction == 'right') {

step++;

//旋转到原位置，即超过最大值

step > max_step && (step = min_step);

} else {

step--;

step < min_step && (step = max_step);

}

img.setAttribute('step', step);

var canvas = document.getElementById('pic_' + pid);

if (canvas == null) {

img.style.display = 'none';

canvas = document.createElement('canvas');

canvas.setAttribute('id', 'pic_' + pid);

img.parentNode.appendChild(canvas);

}

//旋转角度以弧度值为参数

var degree = step * 90 * Math.PI / 180;

var ctx = canvas.getContext('2d');

switch (step) {

case 0:

canvas.width = width;

canvas.height = height;

ctx.drawImage(img, 0, 0);

break;

case 1:

canvas.width = height;

canvas.height = width;

ctx.rotate(degree);

ctx.drawImage(img, 0, -height);

break;

case 2:

canvas.width = width;

canvas.height = height;

ctx.rotate(degree);

ctx.drawImage(img, -width, -height);

break;

case 3:

canvas.width = height;

canvas.height = width;

ctx.rotate(degree);

ctx.drawImage(img, -width, 0);

break;

}

}