如何使此绘图可缩放

Question

到目前为止，这是我的 javascript 和 html。请有人能帮我找到一种方法让这个矩形在鼠标滚轮上可缩放

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = 50;
var height = 35;
var $width = document.getElementById('width');
var $height = document.getElementById('height')

$width.value = width;
$height.value = height;

$width.addEventListener("keyup", function () {
    width = this.value;
    draw();
}, false);

$height.addEventListener("keyup", function () {
    height = this.value;
    draw();
}, false);

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(40, 40, width, height);
}

Answer 1

您可以像这样使用CSS Transform Property，称为scale！

var canvas = document.getElementById("canvas");
     canvas.addEventListener("dblclick", function(){
      this.style.transform="scale(1.5)";
     });
var ctx = canvas.getContext("2d");
var width = 50;
var height = 35;
var $width = document.getElementById('width');
var $height = document.getElementById('height');

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(40, 40, width, height);
}
draw();

<canvas id="canvas"></canvas>