js 将画布缩放把多个超出的图形显示到画布内

可以通过以下步骤将画布缩放并将多个超出的图形显示到画布内：

1. 获取画布对象并设置其宽度和高度，以便能够容纳所有要显示的图形。

var canvas = document.getElementById("myCanvas");
canvas.width = 800;
canvas.height = 600;

2. 创建一个缩放因子，该因子将用于缩放画布。这可以是一个常数值或一个根据画布和图形大小计算出来的值。

var scale = 0.8; // 80% 缩放

3. 使用画布的 getContext() 方法获取 2D 上下文对象，并使用 scale() 方法缩放画布。

var ctx = canvas.getContext("2d");
ctx.scale(scale, scale);

4. 绘制所有要显示的图形，坐标需要按照缩放因子进行缩放。

ctx.beginPath();
ctx.rect(50*scale, 50*scale, 100*scale, 100*scale);
ctx.fillStyle = "red";
ctx.fill();

5. 如果需要，可以使用 translate() 方法将图形移动到画布的中心。

ctx.translate(canvas.width/2, canvas.height/2);

完整代码示例：

var canvas = document.getElementById("myCanvas");
canvas.width = 800;
canvas.height = 600;

var scale = 0.8;
var ctx = canvas.getContext("2d");
ctx.scale(scale, scale);
ctx.translate(canvas.width/2, canvas.height/2);

ctx.beginPath();
ctx.rect(50*scale, 50*scale, 100*scale, 100*scale);
ctx.fillStyle = "red";
ctx.fill();

ctx.beginPath();
ctx.arc(0, 0, 50*scale, 0, 2*Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
``