旋转图像但不旋转画布答案

【问题标题】：Rotate Image but not Canvas旋转图像但不旋转画布
【发布时间】：2015-10-01 07:26:24
【问题描述】：

我在画布中使用背景图像。我只想将背景图像旋转 90 度，但不应旋转上下文。如果我使用 css 变换，那么整个画布都会旋转。我该怎么办？

var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
        
ctx.rect(20, 30, 200, 40);
ctx.strokeStyle="red";
ctx.lineWidth="2";
ctx.stroke();  
        
$(function(){
    //$('#canvas').css({'transform':'rotate(90deg)'});
});

#canvas{
  background: #789;
  border: 1px solid;
}
body{
  margin:10px;
}

&lt;canvas id="canvas" width="400" height="300" style="background-image: url(http://placehold.it/1600x800); background-size: 100%; background-position: -80px -50px;"&gt;Your browser does not support HTML5 Canvas&lt;/canvas&gt;

【问题讨论】：

您是否尝试过使用旋转 JQuery code.google.com/p/jquery-rotate 旋转图像？
我刚刚按照建议尝试过，但没有成功。
这可能有点脏，但您可以尝试将画布移动到
中，旋转该 div，为其提供背景图像，然后向相反方向旋转画布。
其实这会让整个应用变得非常复杂，动态元素很多，很遗憾我避免触摸画布部分的任何东西。
@KiiroSora09 提出了一个可行的解决方案，但如果您有许多动态元素，您可能应该考虑使用一个画布库来为您处理旋转的背景图像等内容。

标签： javascript jquery html css html5-canvas

【解决方案1】：

通过使用伪 :before 元素，您只能旋转背景图像。

#canvas:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(http://placehold.it/1600x800) 0 0 repeat;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

（通过http://www.sitepoint.com/css3-transform-background-image/）

【讨论】：

【解决方案2】：

请看小提琴here。

我创建了一个与画布元素大小相同的container div，然后我在container div 上添加了一个伪元素，用作旋转背景。我认为我们不能在画布本身上使用伪元素，因为画布仅在不受支持时才显示其内容。

【讨论】：