我需要旋转图像,但我的代码没有围绕中心旋转图像,我不明白为什么。当我运行它时我看不到它,所以我怀疑它把它画到了屏幕之外。
push();
rotate(PI / 2 * rotation);
imageMode(CENTER);
image(this.texture, centerPosX, centerPosY);
pop();
当我删除 rotate
时,它会正确绘制图像,但我需要旋转它。
最佳答案
在旋转之前,您需要将 Canvas 原点平移到中心或 Canvas 内的任何点(您希望作为旋转中心)。
这可以使用 translate()
来完成方法。
ᴅᴇᴍᴏ
var img;
function setup() {
createCanvas(300, 300);
img = loadImage('https://i.imgur.com/Q6aZlme.jpg');
}
function draw() {
background('#111');
translate(width / 2, height / 2);
rotate(PI / 180 * 45);
imageMode(CENTER);
image(img, 0, 0, 150, 150);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.min.js"></script>
关于javascript - 如何在 p5.js 中旋转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45388765/