大佬教程收集整理的这篇文章主要介绍了jquery – 按画布旋转后的图像裁剪，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var angleIndegrees = 0;
var image = document.createElement("img");
image.onload = function () {
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image,0);
};
image.src = "Images/rotate.png";
$("#R").click(function () {
angleIndegrees += 90;
drawRotated(angleIndegrees);
});
$("#L").click(function () {
angleIndegrees -= 90;
drawRotated(angleIndegrees);
});
function drawRotated(degrees) {
ctx.clearRect(0,canvas.width,canvas.height);
ctx.save();
ctx.translate(canvas.width / 2,canvas.height / 2);
ctx.rotate(degrees * Math.PI / 180);
ctx.drawImage(image,-image.width / 2,-image.width / 2);
ctx.restore();
}
function newSize(w,h,a){ var rads=a*Math.PI/180; var c = Math.cos(rads); var s = Math.sin(rads); if (s < 0) { s = -s; } if (c < 0) { c = -c; } size.width = h * s + w * c; size.height = h * c + w * s ; }
这是示例代码和小提琴：http://jsfiddle.net/m1erickson/h65yr/
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> #containerDiv{ border: 1px solid red; position:absolute; top:100px; left:100px; } #canvas{ border: 1px solid green; } </style> <script> $(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var imgWidth=200; var imgHeight=300; var size={width:imgWidth,height:imgHeight}; var rotation=0; var deg2Rad=Math.PI/180; var count1=0; var count2=0; var img=new Image(); img.onload=function(){ imgWidth=img.width; imgHeight=img.height; size={width:imgWidth,height:imgHeight}; draw(); } img.src="https://dl.dropBoxusercontent.com/u/139992952/stackoverflow/Rotate.png"; function draw(){ canvas.width=size.width; canvas.height=size.height; // calculate the centerpoint of the canvas var cx=canvas.width/2; var cy=canvas.height/2; var info=document.getElementById("info"); info.innerHTML="canvas size: "+(count1++)+": "+cx+" / "+cy; // draw the rect in the center of the newly sized canvas ctx.clearRect(0,canvas.height); ctx.fillStyle="rgba(216,216,150,1.0)"; ctx.translate(cx,cy); ctx.rotate(rotation * deg2Rad); ctx.drawImage(img,-imgWidth/2,-imgHeight/2); } document.getElementById("rotate").addEventListener("click",rotateClicked,falsE); function rotateClicked(E){ rotation+=30; draw(); } document.getElementById("resize").addEventListener("click",resizeClicked,falsE); function resizeClicked(E){ rotation+=30; newSize(imgWidth,imgHeight,rotation); draw(); } function newSize(w,a){ var rads=a*Math.PI/180; var c = Math.cos(rads); var s = Math.sin(rads); if (s < 0) { s = -s; } if (c < 0) { c = -c; } size.width = h * s + w * c; size.height = h * c + w * s ; } }); </script> </head> <body> <button id="rotate">Rotate without resize</button> <button id="resize">Resize with resize</button> <p id=info></p> <div id="containerDiv"> <canvas id="canvas" width=400 height=400></canvas> </div> </body> </html>
以上是大佬教程为你收集整理的jquery – 按画布旋转后的图像裁剪全部内容，希望文章能够帮你解决jquery – 按画布旋转后的图像裁剪所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。