javascript - 使多边形变小

Question

我将如何使这个多边形更小，使其适合 800X300 的画布区域？

 context.beginPath();
 context.moveTo(200,0);
 context.lineTo(400,0);
 context.lineTo(600,200);
 context.lineTo(600,400);
 context.lineTo(400,600);
 context.lineTo(200,600);
 context.lineTo(0,400);
 context.lineTo(0,200);
 context.closePath();
 context.fill();

我似乎无法弄清楚需要更改哪些数字。

Answer 1

您可以使用该scale()方法。

context.scale(x, x);

x要按比例缩放的因素在哪里。

Answer 2

您可以重新绘制线条，或者最快的方法是在您的上下文中使用 scale 方法，如下所示

 context.scale(0.5,0.5);

这将使它的大小减半，所以一个完整的例子是

var c=document.getElementById("myCanvas");
 var context=c.getContext("2d");
 context.scale(0.5,0.5);

context.beginPath();
 context.moveTo(200,0);
 context.lineTo(400,0);
 context.lineTo(600,200);
 context.lineTo(600,400);
 context.lineTo(400,600);
 context.lineTo(200,600);
 context.lineTo(0,400);
 context.lineTo(0,200);

 context.closePath();
 context.fill();

在此处查看 jsfiddle http://jsfiddle.net/XLW2P/1/