Is there a way to only scale a canvas object once?

时间:2016-05-17 11:17:52

标签: javascript html5 canvas scaling

I'm working on a game where you choose a fish and the you choose a size for the fish and draw it on to the canvas using your cursor, to summarize it. The only problem I'm having at the moment is the size, I just can't seem to figure out how to set different sizes for the fish, Iv'e tried changing the width but because I have many bezier curves, lines in the object, most of the shape doesn't actually have a set width or height. Any help appreciated. Thanks

An Example of one of my fish.

function funkyFish(params){
this.ctx = (typeof params.ctx !== "undefined") ? params.ctx : null;

this.x = (typeof params.x !== "undefined") ? params.x : 0;
this.y = (typeof params.y !== "undefined") ? params.y : 0;
this.width = (typeof params.width !== "undefined") ? params.width : 100;
this.height = (typeof params.height !== "undefined") ? params.height : 50;

this.strokeColour = (typeof params.strokeColour !== "undefined") ? params.strokeColour : "red";
this.strokeWidth = (typeof params.strokeWidth !== "undefined") ? params.strokeWidth : 3;
this.fillColour = (typeof params.fillColour !== "undefined") ? params.fillColour : "green";

this.draw = function(){
    if(this.ctx){
        var size = this.height / 1.5;

        this.ctx.strokeStyle = this.strokeColour;
        this.ctx.lineWidth = this.strokeWidth;
        this.ctx.fillStyle = this.fillColour;

        //Back Fin Things//
        this.ctx.beginPath();

        this.ctx.arc(this.x - 40,this.y - 13,size / 2.5,0,Math.PI * 2);
        this.ctx.arc(this.x - 40,this.y + 13,size / 2.5,0,Math.PI * 2);
        this.ctx.fill();
        this.ctx.stroke();
        //Fins//
        this.ctx.beginPath();
        this.ctx.moveTo(this.x + 32,this.y - 10)
        this.ctx.bezierCurveTo(this.x - 20,this.y - 60,this.x-10,this.y - 50, this.x - 28,this.y - 30);
        this.ctx.moveTo(this.x + 32,this.y + 10);
        this.ctx.bezierCurveTo(this.x - 20,this.y + 60,this.x - 10,this.y  + 50, this.x - 28,this.y + 30);
        this.ctx.fill();
        this.ctx.stroke();
        //Main Body//
        this.ctx.beginPath();

        this.ctx.arc(this.x, this.y,size,0, Math.PI * 2);
        this.ctx.fill();
        this.ctx.stroke();
        //Mouth//
        this.ctx.moveTo(this.x + 16,this.y + 6);
        this.ctx.arc(this.x + 4,this.y + 10,12,0,Math.PI,false);
        this.ctx.stroke();
        //Left Eye//
        this.ctx.beginPath();
        this.ctx.arc(this.x - 15,this.y - 10,size / 4.5,0,Math.PI * 2);
        this.ctx.stroke();
        //Right Eye//
        this.ctx.beginPath();
        this.ctx.arc(this.x + 13,this.y - 10,size / 4.5,0,Math.PI * 2);
        this.ctx.stroke();
    }



}

}

What Iv'e tried so far

    if(fishSize.selectedIndex == 0){
            ctx.scale(0.7,0.7);
        } else if(fishSize.selectedIndex == 1){
            ctx.scale(1,1);
        } else{
            ctx.scale(1.4,1.4);
        }

0 个答案:

没有答案