Search the Community
Showing results for tags 'phaser canvas circle animation'.
-
I've got this little cirlce fill animation and want to draw it on the bitmap context in phaser. var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cx=150; var cy=150; var rectWidth=15; var rectHeight=2; var rotation=0; requestAnimationFrame(animate); function animate(){ requestAnimationFrame(animate); ctx.save(); ctx.translate(cx,cy); ctx.rotate(rotation); ctx.rect(-rectWidth/2+8,-rectHeight/2,rectWidth,rectHeight); ctx.fill(); ctx.restore(); rotation+=Math.PI/180 * 10; } So I set up these: this.ui.loader = game.add.bitmapData(100,100); this.ui.loader.dirty = true; this.ui.displayloader = game.add.image(game.width / 2 - 50, 100, this.ui.loader); And then using the context to draw: this.ui.loader.context.save(); this.ui.loader.context.translate(this.ui.loader.settings.cx,this.ui.loader.settings.cy); this.ui.loader.context.rotate(this.ui.loader.settings.rotation); this.ui.loader.context.rect(-this.ui.loader.settings.rectWidth/2+8,-this.ui.loader.settings.rectHeight/2,this.ui.loader.settings.rectWidth,this.ui.loader.settings.rectHeight); this.ui.loader.context.fill(); this.ui.loader.context.restore(); (Variables are stored in this.ui.loader.settings).. nothing happens, no error, no visible thing, any ideas? Regards
- 2 replies
-
- canvas context
- draw circle animation
- (and 1 more)