Question

var c2 = document.getElementById('c').getContext('2d');
c2.fillStyle = '#f00';
c2.beginPath();
c2.moveTo(200, 20);
c2.lineTo(200, 30);
c2.lineTo(300, 100);
c2.lineTo(400, 90);
c2.closePath();
c2.fill();

找到this教程在画布中绘制多边形。我真的不明白它是如何工作的我的条件是我的多边形是位置（北，南，东，西）和两边的长度。

For example i want 50px north 50px south 50px east 50px west 然后它将是方形我如何使用这个示例代码实现这一点任何想法是值得赞赏的或者如果你能指出一个更好的解决方案，例如使用jquery，我很乐意尝试这个想法

Answer 1

jQuery不会真的帮助你。它可能会使查找画布更容易（但只是略微）

// jQuery :
var c2 = $('c')[0].getContext('2d')

// vanilla javascript (as you have it()
var c2 = document.getElementById('c').getContext('2d');

这是从10,10点开始渲染50px正方形的画布代码。

var c2 = document.getElementById('my_canvas').getContext('2d');
c2.fillStyle = '#f00';
c2.beginPath();
c2.moveTo(10, 10);
c2.lineTo(10, 60);
c2.lineTo(60, 60);
c2.lineTo(60, 10);
c2.closePath();
c2.fill();

<canvas id="my_canvas"></canvas>

如果你想要北，南，东和西方法，你可以建立一个知道当前点并进行适当数学运算的Javascript类。您可以查看fabric.js，这是canvas方法上面向对象的包装器。

Answer 2

你在moveto和lineto函数中传递的是xx和y坐标，所以如果你想绘制一个50px宽的正方形，你可以相应地绘制线条，here是小提琴

var c2 = document.getElementById('c').getContext('2d');
c2.fillStyle = '#f00';
c2.beginPath();
c2.moveTo(200, 0);
c2.lineTo(200, 50);
c2.lineTo(250, 50);
c2.lineTo(250, 0);
c2.closePath();
c2.fill();

你也可以在画布中使用rect方法创建矩形

http://jsfiddle.net/2ubafb9k/1/

c2.fillStyle="red";
c2.fillRect(10,10,50,50);

在画布jquery html中绘制多边形

2 个答案: