如何根据在画布上选择的选项更改上下文的大小?

时间:2016-05-17 00:03:27

标签: javascript html canvas scaling

我正在开发一种游戏,其中鱼的大小(或他们选择的任何项目)取决于用户从下拉菜单中选择的选项。例如如果它们选择较小,鱼会变小等等。当它们选择不同的尺寸时,它们在画布上绘制的鱼也会改变。我已经尝试缩放并改变绘制函数中的大小,但每次,我都遇到了问题。任何帮助将非常感激。感谢。

我的一个形状的例子

function triangle(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 : 2;
this.fillColour = (typeof params.fillColour !== "undefined") ? params.fillColour : "green";

this.draw = function(){


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

    this.ctx.beginPath();
    this.ctx.moveTo(this.x - 34, this.y);
    this.ctx.lineTo(this.x + 0, this.y - 54);
    this.ctx.lineTo(this.x + 40, this.y);
    this.ctx.closePath();
    this.ctx.fill();
    this.ctx.stroke();


}

}

到目前为止我尝试了什么

if(fishSize.selectedIndex == 0){

            ctx.scale(0.5,0.5);
            ctx.scale(1,1);

        } else if(fishSize.selectedIndex == 1){
            ctx.scale(1,1);
        } else {
            ctx.scale(1,1.5);
        }

0 个答案:

没有答案