1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| <!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500">
This feature is not supported by your browser.
</canvas>
</body>
</html>
<script type="text/javascript">
var points = [ {x:0,y:300}, {x:150,y:0}, {x:300,y:300}, {x:0,y:300} ];
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
var firstPoint = points[0];
context.moveTo(firstPoint.x, firstPoint.y);
for (var i=1; i<points.length; i++) {
var currPoint = points[i];
context.lineTo(currPoint.x, currPoint.y);
}
context.stroke();
context.closePath();
</script> |
Partager