2017-06-07 9 views
-1

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

Here is the code on code pen

htmlコードここ

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Monster</title> 
</head> 
<body> 
    <canvas id="canvas" width="900" height="800" style="light-grey; border: 1px solid black"> 
    Your browser does not support canvas 
    </canvas> 
</body> 
</html> 

あるjavascriptのコード

window.onload = function(){ 

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(); 
}; 

答えて

0

はあなたが目的 https://www.w3schools.com/tags/canvas_scale.asp この種のcanvas.scale方法を使用することができている私はラップ私の描画コードを関数に追加し、その先頭にプラスの行を追加してください:

 

    function drawShape(scalewidth,scaleheight) { 
     ctx.scale(scalewidth,scaleheight); 
     ... 
    } 

そして、いくつかの値でそれを呼び出す:

 

    drawShape(0.5, 0.5); 

関連する問題