393 Gury (читается, как 'jury') — является простой в использовании библиотекой для рисования, анимации и управления тегами Canvas HTML5.
Цель проекта — поддержка API Canvas HTML5 c фреймворком для более быстрой и удобной разработки приложений.
ПримерСкачать
Библиотека была построена по подобию jQuery. Она такая же простая и удобная в использовании. Например, вы можете инициализировать стили и анимацию в одном выражении. Просто посмотрите код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html><html> <head> <title>My Awesome Gury App</title> </head> <body> <!-- Load jQuery for extra .place() functionality --> <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <!-- Load gury library --> <script type="text/javascript" charset="utf-8" src="http://github.com/downloads/rsandor/gury/gury.min.js"></script> <!-- Create my awesome app! --> <script type="text/javascript" charset="utf-8"> // Create and style a new canvas using gury $g().size(256, 256).background("#363").add({ // Hold some object information size: 128, theta: 0, dTheta: Math.PI / 120, // Updates the object rotation each frame update: function() { this.theta += this.dTheta; }, // Draws the object onto the canvas each frame draw: function(ctx, canvas) { ctx.fillStyle = "#ada"; ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(this.theta); ctx.fillRect(-this.size/2, -this.size/2, this.size, this.size); ctx.restore(); } }) // Finally place the canvas in the body tag and begin animation .place("body").play(33); </script> </body> </html> |
