Goodspeed

导航

Canvas 旋转的图片

var image = new Image(), counter = 0;
            image.onload = function () {
                var CANVAS_WIDTH = 300, CANVAS_HEIGHT = 300;
                var canvas = $("#canvas").css({width:CANVAS_WIDTH, height:CANVAS_HEIGHT})
                        .attr({width:CANVAS_WIDTH, height:CANVAS_HEIGHT}).get(0), _ = this;
                var context = canvas.getContext("2d");
                context.font="24px Courier New";

                var loop = function () {
                    context.clearRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT);
                    var drgee = counter * 10 % 360;
                    context.save();
                    var x = _.width / 2, y = _.height / 2
                    context.arc(x,y,5,0,2*Math.PI);
                    context.stroke();
                    context.translate(x, y);
                    context.rotate(drgee*Math.PI/180)
                    context.drawImage(_,-x,-y)
                    context.restore();
                    context.fillText(drgee, 100,100)
                    counter++;
                };

                window.setInterval(loop,1000/25);

            };
            image.src="/images/game_gold.png"

  

posted on 2017-03-20 13:15  Goodspeed  阅读(328)  评论(1编辑  收藏  举报