javascript canvas 如何对图片进行绕中心点旋转
需要做一个在canvas里对图片进行拖拽、缩放、旋转的一个小应用。现在可以拖拽，旋转有个问题，不好解决，demo代码大概80行代码的样子，希望路过的朋友指点下，谢谢！（我...
需要做一个在canvas里对图片进行拖拽、缩放、旋转的一个小应用。现在可以拖拽，旋转有个问题，不好解决，demo代码大概80行代码的样子，希望路过的朋友指点下，谢谢！（我觉得问题出在转换坐标系过程了，但是不是很明白，求指点。）
自己研究了好一阵子，始终没有没有突破，希望得到技术大牛指点，最好是完善下我下面链接里的demo，谢谢！
http://youryida.duapp.com/other/drag_rotate/ 展开
自己研究了好一阵子，始终没有没有突破，希望得到技术大牛指点，最好是完善下我下面链接里的demo，谢谢！
http://youryida.duapp.com/other/drag_rotate/ 展开
展开全部
给你一个旋转的demo:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br/>
<input type="text" id="angle_v" readonly="1"/>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.translate(100,45)
//ctx.rotate(70*Math.PI/180);
//ctx.fillRect(-50,-25,100,50);
var angle=10;
var angle_now = 0;
myRotate()
function myRotate()
{
ctx.clearRect(-100,-50,200,100);//x2 是为了把原来的图全部抹掉（不留下痕迹）
ctx.rotate(angle*Math.PI/180);
ctx.fillRect(-50,-25,100,50);
angle_now= (angle_now + angle)%360;
document.getElementById("angle_v").value="当前角度:"+angle_now;
setTimeout(myRotate,1000);
}
</script>
</body>
</html>
注意：用roate实现旋转，重点在于改变坐标中心点 : ctx.translate(100,45)
坐标中心点计算公式：x = 左上角x + 宽度/2
y = 左上角y + 高度/2
然后translate到(x,y)即可，之后调用rotate进行旋转。
旋转之后填充时注意：ctx.fillRect(-50,-25,100,50);
x = - 宽度/2
y = -高度/2
fillRect(x,y,宽度，高度)
你的例子，代码控制比较看不懂。。。，所以没在基础上整改。
补充一个参考网站（英文的）：http://tutorials.jenkov.com/html5-canvas/transformation.html
（如果有帮助，望采纳，谢谢）
追问
谢谢你的回答，可能我没说明白，我要做的是鼠标拖动旋钮控制图片绕中心点旋转。我的代码里已经实现了绕中心旋转，只是有一些问题，并且转一下再拖拽图片的时候会有问题。
我现在找到问题所在了，因为canvas绘图函数drawImage，只能指定左上角坐标然后竖直绘制。如果旋转后再拖拽的话，需要记住旋转的角度，并且在拖拽的时候，改变位置+旋转。
我去改改代码哈！
追答
问题已经解决,chrome下测试通过，但是百度字数限制不然传，要不楼主把分给我再开一个问题（唉，我就差两个问题升级到7了，纠结了很久）
写完了，耗时两天。把你需求改了下：
（在图片上单击时则为移动图片---包括激活和关闭。 在图片外单击则为旋转图片---如果鼠标移动到图片上则自动关闭旋转模式）
代码发到你的百度私信了。望采纳。谢谢
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
