JavascriptとHTML5 Canvas

Question

私が渡した変数に基づいてキャンバスの形状を動的に変更する図を作ろうとしています。私が持っているものは、モンスターの形を変えたい場合、それを実現するために多くの価値を変えるには、どのようにして私が1カ所でそれを変更したときに変化が起こるようにすべての番号を作るのですか？ Here is the code on codepen

あなたはVSOのように作成されている描画するためのクラスを作成することができます

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
var x = 0; 
var y = 0; 
var width = 0; 
var height = 0; 
var radius = 0; 

var squareLength = 450; 

ctx.save(); 
ctx.beginPath(); 
ctx.fillStyle = '#33b262'; 
//Translate to the center of the canvas 
ctx.translate(x+ 450, y+ 350); 
ctx.rotate(Math.PI /4); 
ctx.translate(x+ (-(squareLength/2)), y+ (- (squareLength/2))); 
ctx.fillRect(x + 0,y+ 0, width + squareLength, height+ 
squareLength); 
ctx.restore(); 
ctx.closePath(); 

// eye 
ctx.fillStyle = 'white'; 
ctx.beginPath(); 
ctx.arc(x + 450, y+ 210, radius+ 75, 0, 2 * Math.PI, false); 
ctx.closePath(); 
ctx.fill(); 

// eye black filling 
ctx.fillStyle = 'black'; 
ctx.beginPath(); 
ctx.arc(x + 450, y+ 210, radius+ 17, 0, 2 * Math.PI, false); 
ctx.closePath(); 
ctx.fill(); 

//mouth 
ctx.beginPath(); 
ctx.restore(); 
ctx.translate(x+ 250,y+ 100); 
ctx.rect(x + 100,y+ 300, width + 200,height+ 70); 
ctx.fillStyle = 'black'; 
ctx.fill(); 
ctx.closePath(); 

//left tooth 
ctx.beginPath(); 
ctx.restore(); 
ctx.rect(x + 135,y+ 300, width + 30,height+ 30); 
ctx.fillStyle = 'white'; 
ctx.fill(); 
ctx.closePath(); 

//right tooth 
ctx.beginPath(); 
ctx.restore(); 
ctx.rect(x + 237,y+ 300, width + 30,height+ 30); 
ctx.fillStyle = 'white'; 
ctx.fill(); 
ctx.closePath(); 

//bottom tooth 
ctx.beginPath(); 
ctx.restore(); 
ctx.rect(x + 185,y+ 340, width + 30,height+ 30); 
ctx.fillStyle = 'white'; 
ctx.fill(); 
ctx.closePath(); 

//left leg 
ctx.beginPath(); 
ctx.fillStyle = '#800000'; 
ctx.moveTo(x + 303, y+ 465); 
ctx.lineTo(x + 335, y+ 433); 
ctx.lineTo(x + 335, y+ 615); 
ctx.lineTo(x + 303, y+ 615); 
ctx.fill(); 
ctx.closePath(); 

//right leg 
ctx.beginPath(); 
ctx.fillStyle = '#800000'; 
ctx.moveTo(x + 97, y+ 465); 
ctx.lineTo(x + 65, y+ 433); 
ctx.lineTo(x + 65, y+ 615); 
ctx.lineTo(x + 97, y+ 615); 
ctx.fill(); 
ctx.closePath(); 

//right shoe 
ctx.fillStyle = '#330000'; 
ctx.beginPath(); 
ctx.arc(x + 319, y+ 660, radius+ 65, 0, 1 * Math.PI, true); 
ctx.closePath(); 
ctx.fill(); 

//right shoe 
ctx.fillStyle = '#330000'; 
ctx.beginPath(); 
ctx.arc(x + 79, y+ 660, radius+ 65, 0, 1 * Math.PI, true); 
ctx.closePath(); 
ctx.fill(); 

Answer 1

Javascriptのコードは次のように示唆した。..

class Drawing { 
    constructor(x, y, scale) { 
     this.x = x; 
     this.y = y; 
     this.scale = scale; 
    } 

    get size() { 
     return [Number(this.x) * Number(this.scale), Number(this.y) * Number(this.scale)]; 
    } 

} 
var draw = new Drawing(10, 15, 5); 
document.write('(Scaled) X:' + draw.size[0] + ' Y:' + draw.size[1]);