我试图在画布上做我的第一个图像动画.我想让图片旋转,但我的代码中的东西不正确.有任何想法吗？这都在一个
jquery文档中准备好：
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);
setInterval(function() {
ctx.save();
ctx.clearRect(-ctx.canvas.width/2,-ctx.canvas.height/2,ctx.canvas.width,ctx.canvas.height);
ctx.drawImage(img,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);
}
解决方法
只需更改代码的顺序,即
ctx.rotate(...); ctx.drawImage(...);
见一个工作示例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,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
});
