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

突袭网学院频道收集了关于【Canvas 绘图怎么旋转图片，不是画布旋转？】相关的解决方案,此问题详细描述为:

希望我们收集此问题的解决方案对所有碰到此问题的朋友有帮助.

以下是突袭网编辑收集于互联网的各种解决方案,我们不能保证这些解决方案能彻底解决您的问题,但是作为一种参考希望能帮到您

------解决方案1--------------------
旋转
绘图
旋转回来

就是这样

------解决方案2--------------------
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();//恢复状态

------解决方案3--------------------
您好，能给个代码的例子不？我半天没试出来。。。

------解决方案4--------------------
引用 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>

------解决方案5--------------------
引用 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>

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

------解决方案6--------------------
大概知道了，非常感谢，应该是这样的
引用 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>

以上为突袭网编辑收集的关于【Canvas 绘图怎么旋转图片，不是画布旋转？】相关的解决方案,因为收集于互联网,突袭网不享有对应知识的版权,其版权归原站原作者收有,特此声明.