[英]skew and animate image on canvas
I want to skew and animate image on a canvas. 我想对画布上的图像进行倾斜和动画处理。 I can draw Image on canvas but how to skew and animate it after drawing?
我可以在画布上绘制图像,但是绘制后如何倾斜和设置动画? How to get reference of the image which is drawn on canvas?
如何获得在画布上绘制的图像的参考?
I can draw image on canvas like this 我可以像这样在画布上画图像
var ctx = document.getElementById('canvas').getContext('2d');
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
Here is a very rough sketch to get you started: 这是一个非常粗糙的草图,可以帮助您入门:
$(function () {
var
loaded = false,
ctx = $('canvas')[0].getContext('2d'),
img;
img = $('<img>', {
src: 'http://www.gravatar.com/avatar/e25f40f6711403073e7da6c33be21eb8?s=128&d=identicon&r=PG'
}).on('load', function () {
loaded = true;
}).get(0);
setInterval(function () {
var f = 0;
return function () {
if (loaded) {
ctx.clearRect(0, 0, 500, 500);
ctx.save();
ctx.setTransform (1, f, 0, 1, 0, 0);
ctx.drawImage(img, 50, 50);
ctx.restore();
f += 0.01;
if (f > 1) {
f = 0;
}
}
};
}(), 16);
});
demo: http://jsfiddle.net/UHSKL/ 演示: http : //jsfiddle.net/UHSKL/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.