在画布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();

Found this tutorial to draw a polygon in canvas. I don't really understand how it works my condition in making my polygon is the location(north,south,east,west) and the length of the sides.

For example i want 50px north 50px south 50px east 50px west then it will be square how can i achieve this using this sample code any idea is appreciated or If you can point me to a better solution for example using jquery i would be happy to try the idea

Answer 1

jQuery won't really help you. It might make finding the canvas easier (but only slightly)

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

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

Here is the canvas code to render a 50px square starting at point 10, 10.

 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> 

If you want methods like north, south, east, and west, you could build a Javascript class that knows the current point and does the appropriate math. You might look into fabric.js which is an object oriented wrapper on the canvas methods.

Answer 2

what you pass inside moveto and lineto function is xx and y co ordinates, so if you want to draw a square of 50px width you can draw lines accordingly, here is the fiddle

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

you can also create rectangles using rect method in canvas

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

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