我在画布上使用背景图片。我只想将背景图片旋转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>
请看这里的小提琴。
我创建了一个container
与canvas元素大小相同的div,然后在container
div上添加了一个伪元素作为旋转背景。我认为我们无法在画布本身上使用伪元素,因为画布仅在不支持时才显示其内容。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句