Javascript 如何使此绘图可缩放

这是我迄今为止的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);
}

---

您可以像这样使用名为

scale

的

CSS转换属性


var canvas=document.getElementById（“canvas”）；
addEventListener（“dblclick”，function（））{
this.style.transform=“scale（1.5）”；
});
var ctx=canvas.getContext（“2d”）；
var宽度=50；
var高度=35；
var$width=document.getElementById（'width'）；
var$height=document.getElementById（'height'）；
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.fillRect（40，40，宽度，高度）；
}
draw（）
酷！如果你不介意的话，我还有几个问题要问。第一：我如何使用它来放大和缩小，就像在鼠标滚轮上一样。如果用户想要的话，正方形越近，然后距离就越远。第二：一个人如何只画“边界”而不填充正方形。谢谢下面是一个在不填充正方形的情况下绘制边框的示例。在本链接中，您还可以了解鼠标滚轮事件的工作原理！享受吧！如果你需要帮助来理解代码，告诉我！