在画布jQuery HTML中绘制多边形

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();

找到了本教程，可以在画布上绘制多边形。 我不太了解它的工作原理，我制作多边形的条件是位置（北，南，东，西）和边长。

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宽度的正方形，则可以相应地绘制线， 这是小提琴

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);