html5 canvas - 同时旋转和移动图像

发布于 2024-12-05 23:33:41 字数 847 浏览 0 评论 0原文

我已经找到了如何使用画布旋转图像，但我在创建同时旋转和移动图像的动画时遇到问题。这就是我已经拥有的：

var img;
var context;
var processID;
var i = 0;
var rectWidth = 64;
var rectHeight = 64;
window.onload = function(){
        var canvas = document.getElementById("canvas");  
        context = canvas.getContext("2d");
        context.translate(canvas.width / 2, canvas.height / 2);
        processID = setInterval(draw,1000/100);
    }
    function draw() { 
        if(i <= 360) {
            context.clearRect(-canvas.width / 2, -canvas.width / 2, canvas.width, canvas.height);       
            context.strokeRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
            context.rotate(1 * Math.PI / 180);
            i++;
        } else {
            clearInterval(processID);
        }  
    }

所以现在我希望我的方块在旋转时移动到顶部。我真的在这里迷路了，希望得到一些帮助。

原文

i allready found out how to rotate an image with canvas, but im having problems creating an animation, which rotates and moves an image at the same time. This is what i already have:

var img;
var context;
var processID;
var i = 0;
var rectWidth = 64;
var rectHeight = 64;
window.onload = function(){
        var canvas = document.getElementById("canvas");  
        context = canvas.getContext("2d");
        context.translate(canvas.width / 2, canvas.height / 2);
        processID = setInterval(draw,1000/100);
    }
    function draw() { 
        if(i <= 360) {
            context.clearRect(-canvas.width / 2, -canvas.width / 2, canvas.width, canvas.height);       
            context.strokeRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
            context.rotate(1 * Math.PI / 180);
            i++;
        } else {
            clearInterval(processID);
        }  
    }

So now i want my square to move to the top while rotating. I'm really lost here and would appreciate some help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光瘦了 2024-12-12 23:33:41

您可以使用 translate 方法，或更一般地使用 transform 方法。请参阅文档有关您可以执行的操作的参考，以及 wiki 页面变换矩阵

回复收藏 0 原文

情痴 2024-12-12 23:33:41

幸运的是我自己找到了答案：

var img;
var context;
var processID;
var i = 0;
var rectWidth = 64;
var rectHeight = 64;
window.onload = function(){
    var canvas = document.getElementById("canvas");  
    context = canvas.getContext("2d");
    processID = setInterval(draw,1000/100);
}
function draw() { 
    if(i <= 360) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.save();
        context.translate(canvas.width / 2, i+(canvas.height / 2));
        context.rotate(i * Math.PI / 180);
        context.strokeRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
        context.restore();
        i++;
    } else {
        clearInterval(processID);
    }  
}

So luckily i found the answer myself:

var img;
var context;
var processID;
var i = 0;
var rectWidth = 64;
var rectHeight = 64;
window.onload = function(){
    var canvas = document.getElementById("canvas");  
    context = canvas.getContext("2d");
    processID = setInterval(draw,1000/100);
}
function draw() { 
    if(i <= 360) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.save();
        context.translate(canvas.width / 2, i+(canvas.height / 2));
        context.rotate(i * Math.PI / 180);
        context.strokeRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
        context.restore();
        i++;
    } else {
        clearInterval(processID);
    }  
}

回复收藏 0 原文

~没有更多了~