gpt4 book ai didi

javascript - Canvas 动画图像旋转

转载 作者:行者123 更新时间:2023-11-29 10:34:57 24 4
gpt4 key购买 nike

我想在 Canvas 上为我的脚本创建一个背景,使图像在屏幕上落下并向下旋转。那么有人可以向我解释如何旋转图像,然后使用 <canvas> 将其绘制到屏幕上吗?元素。我有以下代码:

    Equations.prototype.Draw = function() {
//increases the rotational value every loop
this.rotate = (this.rotate + 1) % 360;
//rotates the canvas
ctx.rotate(this.rotate*Math.PI/180);
//draw the image using current canvas rotation
ctx.drawImage(this.img,this.x,this.y);
//restore canvas to its previous state
ctx.rotate(-this.rotate*Math.PI/180);
};

我尝试这样做,发现图像会旋转,但也会在屏幕上围绕点 (0,0) 以圆形移动,我希望它留在原地旋转的同一位置。我该如何解决这个问题,谢谢!

最佳答案

保存上下文,对其进行变换、旋转、绘制、恢复。

const rand = (m, M) => Math.random() * (M - m) + m,
PI = Math.PI,
TAU = PI * 2,
width = window.innerWidth,
height = window.innerHeight,
ctx = document.getElementById('cvs').getContext('2d'),
items = [],
Item = function() {
this.h = 32;
this.w = 32;
this.IMG = new Image();
this.IMG.src = 'http://stackoverflow.com/favicon.ico';
this.start();
return this;
};

Item.prototype.start = function() {
this.x = rand(0, width - this.w / 2);
this.y = rand(0, height);
this.angle = rand(0, TAU);
this.speed = rand(0.1, 0.5);
}

Item.prototype.move = function() {
// Manipulate properties
if (this.y > height + this.h) { // if is below bottom
this.start();
this.y = -this.h; // restart from top
}
this.y += this.speed / 0.1;
this.angle += this.speed;
this.angle %= TAU;

// Manipulate context
ctx.save(); // save context
ctx.translate(this.x, this.y); // move to point
ctx.rotate(this.angle); // rotate around that point
ctx.drawImage(this.IMG, -this.w/2, -this.h/2);
ctx.restore(); // restore to initial coordinates
};

// Setup canvas
ctx.canvas.width = width;
ctx.canvas.height = height;

// Create falling Icons
for (var i = 0; i < 100; i++) items.push(new Item());

// Animation loop
(function loop() {
ctx.clearRect(0, 0, width, height);
items.forEach(Item => Item.move());
requestAnimationFrame(loop);
}());
body {margin: 0;}
canvas {display: block;}
<canvas id="cvs"></canvas>

关于javascript - Canvas 动画图像旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38422251/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com