因此,我有一个带有背景图像的画布,该画布上具有用户定义的点/坐标。
我想旋转整个画布,使图像和圆点保持在完全相同的位置。
我该怎么做。
这就是我所拥有的
var canvas = document.getElementById("car");
canvas.width = 364;
canvas.height = 219;
canvas.style = "border:1px solid red";
var canvasContext = canvas.getContext("2d");
const image = "https://i.ibb.co/cYfp8SQ/sedan.jpg";
let canvasImg = new Image();
canvasImg.src = image;
canvasImg.onload = () => {
canvasContext.drawImage(canvasImg, 0, 0, canvas.width, canvas.height);
};
setTimeout(() => {
canvasContext.fillStyle = "red";
canvasContext.beginPath();
canvasContext.arc(110, 80, 5, 0, Math.PI * 2, true);
canvasContext.fill();
}, 200);
我已经阅读了很多有关平移和旋转的文章,但是它们全部都是图形或图像,而不是全部。
有没有办法在保持坐标不变的情况下旋转此画布?
我做了个小提琴供参考 https://jsfiddle.net/heinrichcoetzee/sjcxdv08/2/
我希望它看起来像->
答案 0 :(得分:2)
这是CSS:
canvas {
transform: rotateZ(90deg);
}
或者在JS中:
const canvas = document.getElementById("car");
canvas.style.border = "1px solid red";
canvas.style.transform = "rotateZ(90deg)";