キャンバス上で最初の画像アニメーションを作成しようとしています。画像を回転させたいのですが、コードが正しくありません。何か案は?これはすべて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,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);
}
コードの順序を変更するだけです。つまり、
ctx.rotate(...);
ctx.drawImage(...);
$(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
});
上記のコメントに基づいていますが、もう少しシンプルでバニラです。これは私にとって完璧に機能しました。もちろん、各レンダリングでキャンバスを消去するには、clearRectを使用する必要があります。
var canvas = document.querySelector('#my-canvas');
var ctx = canvas.getContext('2d')
var ang = 0
function rotateAndRenderImg() {
var img = document.querySelector('img')
ctx.save()
var pos = {x: desiredRenderPosX, y: desiredRenderPosY}
ctx.translate(pos.x ,pos.y)
ctx.rotate(Math.PI / 180 * (ang += 5))
ctx.drawImage(img, -img.width / 2, -img.height / 2, img.width, img.height)
ctx.restore()
}
受け入れられた回答に基づいて、この例では、固定のキャンバスサイズを使用できます(画像サイズとは関係ありません)。
$(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 = 500; //Any width
canvas.height = 500; //Any height
var cache = this; //cache the local copy of image element for future reference
var iw = cache.width;
var ih = cache.height;
setInterval(function () {
ctx.save(); //saves the state of canvas
ctx.clearRect(0, 0, canvas.width, canvas.height); //clear the canvas
ctx.translate(canvas.width/2, canvas.height/2); //let's translate
ctx.rotate(Math.PI / 180 * (ang += 5)); //increment the angle and rotate the image
ctx.translate(-(canvas.width/2), -(canvas.height/2)); //let's translate
ctx.drawImage(img, canvas.width/2 - iw/2, canvas.height/2 - ih/2, iw, ih); //draw the image ;)
ctx.restore(); //restore the state of canvas
}, fps);
};
img.src = 'https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300'; //img
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<canvas id="logobg1" > test canvas <canvas>
注:クールスピンのためにctx.save
とctx.restore
を削除してみてください。