Javascript画布动态改变形状

Question

我正在尝试根据我传入的变量在画布中动态更改形状。我所拥有的是，如果想要更改怪物的形状或使其更大，我必须将很多值更改为让它发生，我如何制作我的所有号码，以便当我在 1 个地方更改它时，更改会随处发生。

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

Answer 1

您可以将 canvas.scale 方法用于这种目的https://www.w3schools.com/tags/canvas_scale.asp我将我的绘图代码包装成一个函数并在它的开头添加一个加号：

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

然后用一些值调用它：

drawShape(0.5, 0.5);

Javascript画布动态改变形状

问题描述

1 个解决方案

解决方案1
0 2017-06-07 17:29:10

Javascript画布动态改变形状

问题描述

1 个解决方案

解决方案1 0 2017-06-07 17:29:10

解决方案1
0 2017-06-07 17:29:10