Question

我在画布中使用背景图片。我想仅将背景图像旋转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;
}

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

Answer 1

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

scala> def f(vs: List[Int])(pf: PartialFunction[Int, Int]) = vs map (pf orElse { case x => x })
f: (vs: List[Int])(pf: PartialFunction[Int,Int])List[Int]

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

Answer 2

请参阅小提琴here。

我创建了一个与canvas元素大小相同的container div，然后在container div上添加了一个伪元素作为旋转背景。我不认为我们可以在画布上使用伪元素，因为画布只在不支持时显示它的内容。

旋转图像但不旋转画布

2 个答案: