我试图在画布上做我的第一个图像动画.我想让图片旋转,但我的代码中的东西不正确.有任何想法吗?这都在一个
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
- });