绕其中心的画布图像 [英] Rotate an image around its center in canvas

问题描述

我试图做在画布上我的第一个动漫形象。我希望图像旋转，但东西是不正确的在我的code。有任何想法吗？这一切都是一个jQuery文档准备：

  VAR帆布=的document.getElementById（'logobg1'）;
    变种CTX = canvas.getContext（'2D'）;    VAR IMG =新的图像（）; //创建新的Image对象
    img.src ='图像/ containerbg.png'; //设置源路径//设置IMG SRC    img.onload =功能（）{//当图像加载
        ctx.drawImage（IMG，0,0）;
        的setInterval（函数（）{
            ctx.save（）;
            ctx.clearRect（-ctx.canvas.width / 2，-ctx.canvas.height / 2，ctx.canvas.width，ctx.canvas.height）;
            ctx.drawImage（IMG，0,0）;
            ctx.translate（ctx.canvas.width / 2，ctx.canvas.height / 2）; //设置画布背景为中心
            ctx.rotate（Math.PI / 180 * 0.5）; // 1/2的程度
            ctx.restore（）;
        }，16）;
    }
 

解决方案

只是改变你的code，即秩序。

  ctx.rotate（...）;ctx.drawImage（...）;
 

参见工作示例 http://jsbin.com/owuyiq/

  $（函数（）{
    变种帆布=的document.getElementById（'logobg1'）;
    变种CTX = canvas.getContext（'2D'）;
    VAR IMG =新的图像（）;    VAR ANG = 0; //角度
    VAR FPS = 1000年至1025年; //每秒帧数
    img.onload =功能（）{//图像负载做以下的东西
        canvas.width = this.width＆LT;＆LT; 1; //双画布宽度
        canvas.height = this.height＆LT;＆LT; 1; //双画布高度
        VAR缓存=这一点; //缓存图像元素以供将来参考本地副本
        的setInterval（函数（）{
            ctx.save（）; //保存画布的状态
            ctx.clearRect（0，0，canvas.width，canvas.height）; //清除画布
            ctx.translate（cache.width，cache.height）; //让我们翻译
            ctx.rotate（Math.PI / 180 *（ANG + = 5））; //增加的角度和旋转图像
            ctx.drawImage（IMG，-cache.width / 2，-cache.height / 2，cache.width，cache.height）; //绘制图像;）
            ctx.restore（）; //恢复画布的状态
        }，FPS）;
    };    img.src ='http://i.stack.imgur.com/Z97wf.jpg?s=128'; // IMG
}）;
 

I'm trying to do my first image animation on canvas. I want the image to rotate but something is not correct in my code. Any ideas? This is all in a jquery document ready:

var canvas = document.getElementById('logobg1');  
    var ctx = canvas.getContext('2d');

    var img = new Image();   // Create new Image object
    img.src = 'images/containerbg.png'; // Set source path // set img src

    img.onload = function(){ // when image loads
        ctx.drawImage(img,0,0);
        setInterval(function() {
            ctx.save();
            ctx.clearRect(-ctx.canvas.width/2, -ctx.canvas.height/2, ctx.canvas.width, ctx.canvas.height);
            ctx.drawImage(img,0,0);
            ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2); // set canvas context to center
            ctx.rotate(Math.PI / 180 * 0.5); // 1/2 a degree
            ctx.restore();
        }, 16);
    }

解决方案

just change the order of your code, i.e.,

ctx.rotate(...);

ctx.drawImage(...);

See a working example http://jsbin.com/owuyiq/

$(function () {
    var canvas = document.getElementById('logobg1');
    var ctx = canvas.getContext('2d');
    var img = new Image();

    var ang = 0; //angle
    var fps = 1000 / 25; //number of frames per sec
    img.onload = function () { //on image load do the following stuff
        canvas.width = this.width << 1; //double the canvas width
        canvas.height = this.height << 1; //double the canvas height
        var cache = this; //cache the local copy of image element for future reference
        setInterval(function () {
            ctx.save(); //saves the state of canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height); //clear the canvas
            ctx.translate(cache.width, cache.height); //let's translate
            ctx.rotate(Math.PI / 180 * (ang += 5)); //increment the angle and rotate the image 
            ctx.drawImage(img, -cache.width / 2, -cache.height / 2, cache.width, cache.height); //draw the image ;)
            ctx.restore(); //restore the state of canvas
        }, fps);
    };

    img.src = 'http://i.stack.imgur.com/Z97wf.jpg?s=128'; //img
});

这篇关于绕其中心的画布图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！