如何旋转将绘制到画布上的图像？答案

【问题标题】：How to rotate an image that will be drawn on to canvas?如何旋转将绘制到画布上的图像？
【发布时间】：2011-05-30 04:01:27
【问题描述】：

所以有了画布和 canvasContext，我想在画布上多次绘制图像

所以我有这样的代码：

  var img = new Image();
  img.src = 'http://superior0.narod.ru/5050.png';
function drawLine(g, n, x1, y1, x2, y2){

   g.drawImage(img,x1,y1,10,10); 
}

这里我不旋转图像。如果从点 x1, y1 到 x2, y2 绘制线，我需要旋转它。

如何在 HTML5 和 Javascript 中做这样的事情？（只需要使用一个画布）

您可以在 acrion here 中看到问题

【问题讨论】：

我去了“问题在行动”...我的电脑因动画而死机。
玩起来很有趣的神。
@William 你看起来像是一个准备下载并切换到 Chrome 的人

标签： javascript image html canvas draw

【解决方案1】：

使用上下文的rotate 方法，注意以正确的顺序调用旋转和平移（如果您不习惯矩阵变换，这可能会很棘手）。 Quick example.

【讨论】：