Canvas 绘图怎么旋转图片，不是画布旋转？

[_Elaine]

大神们，我想问的是，非安卓上的canvas
纯Web应用中，Canvas 绘图，canvas.drawImage()怎么旋转图片，不是画布旋转？
这个函数没有旋转的参数，求救！！！

[KK3K2005]

旋转 绘图 旋转回来 就是这样

[天际的海浪]

canvas没有直接旋转图片的功能，只能旋转画布 一般的做法是 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();//恢复状态

[_Elaine]

您好，能给个代码的例子不？我半天没试出来。。。

[天际的海浪]

引用 3 楼 yisisi1220 的回复:

您好，能给个代码的例子不？我半天没试出来。。。

<canvas id="canvasId" width="400" height="400"></canvas>
<script type="text/javascript">
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();//恢复状态
}
</script>

[_Elaine]

引用 4 楼 jslang 的回复:

[quote=引用 3 楼 yisisi1220 的回复:] 您好，能给个代码的例子不？我半天没试出来。。。

<canvas id="canvasId" width="400" height="400"></canvas>
<script type="text/javascript">
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();//恢复状态
}
</script>

[/quote] 问一下，比如，我想在画布上的某一个点（x,y）为图片的左上角起始点，旋转A角度，怎么写，我把这个坐标点，对应不到 你的代码里去？？！

[_Elaine]

大概知道了，非常感谢，应该是这样的

引用 3 楼 yisisi1220 的回复:

您好，能给个代码的例子不？我半天没试出来。。。

<canvas id="canvasId" width="400" height="400"></canvas>
<script type="text/javascript">
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(x,y);//设置画布上的(0,0)位置，也就是旋转的中心点
	ctx.rotate(45*Math.PI/180);
	ctx.drawImage(img,0,0);//把图片绘制在旋转的中心点，
	ctx.restore();//恢复状态
}
</script>

[/quote]