Kreslení polygonu

by Petr Haluza

HTML

<div class="container">
<canvas id='rect-canvas' width="300" height="150"></canvas>
</div>

CSS

#rect-canvas {
  border: 1px dotted black
}



body {
  background-color:#cccccc;
}

JavaScript

var canvas = document.getElementById('rect-canvas');
var ctx = canvas.getContext('2d');
var topLeft = {x:percentToPxHor(10.275),y:percentToPxVert(20.691)};
var bottomLeft = {x:percentToPxHor(30.275),y:percentToPxVert(80.72)};
var topRight = {x:percentToPxHor(55.459),y:percentToPxVert(61.407)};
var bottomRight = {x:percentToPxHor(65.352),y:percentToPxVert(82.436)};

render();    


function render() {
  // clear canvas
  ctx.fillStyle='white';
//  ctx.fillRect(0,0,canvas.width,canvas.height);
  // draw points and connect
  drawPoly([topLeft, bottomLeft, bottomRight, topRight]);
  lineTo([topLeft, topRight]);
}


function percentToPxHor(intPx) {
    return intPx * canvas.width / 100;
}

function percentToPxVert(intPx) {
    return intPx * canvas.height / 100;
}

function drawPoly(points, color) {
 ctx.strokeStyle = color ? color : 'red';
 ctx.beginPath();
 var p = points[points.length-1];
 ctx.moveTo(p.x, p.y);
 for(var i = 0; i < points.length; i++) {
   var p = points[i];
   ctx.lineTo(p.x, p.y); 
 }
 ctx.stroke();
}