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/

使多边形变小

2 个答案: