Canvas 旋转的图片

时间：2022-05-14 11:16:35
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"

　　

相关文章