Javascript画布动态地改变形状

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

来源

2017-06-07 john

可以使用canvas.scale方法为这种目的 https://www.w3schools.com/tags/canvas_scale.asp 我包将我的绘图代码放到一个函数中，并在其开始处添加一条加线：

 

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

然后用一些价值观称之为：

 

    drawShape(0.5, 0.5);

来源

2017-06-07 17:29:10 Ursache

Javascript画布动态地改变形状

回答

相关问题