0

我将如何使这个多边形更小，使其适合 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();

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

4

2 回答 2

3

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

context.scale(x, x);

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

于 2013-10-22T16:29:32.183 回答
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/

于 2013-10-22T16:33:51.537 回答