Draw Polygon <Vẽ hình đa giác>2023<!DOCTYPE HTML> <html> <head> <title>An example to draw an polygon</title> <script type="text/javascript"> function drawPolygon() { var canvas = document.getElementById('canvasbox'); if (canvas.getContext) { var objctx = canvas.getContext('2d'); objctx.beginPath(); objctx.moveTo(75, 50); objctx.lineTo(175, 50); objctx.lineTo(200, 75); objctx.lineTo(175, 100); objctx.lineTo(75, 100); objctx.lineTo(50, 75); objctx.closePath(); objctx.fillStyle = "rgb(200,0,0)"; objctx.fill(); } else { alert('You need HTML5 compatible browser to see this demo.'); } } </script> </head> <body onload="drawPolygon();"> <canvas id="canvasbox"></canvas> </body> </html>
<!DOCTYPE HTML>
<html>
<head>
<title>An example to draw an polygon</title>
<script type="text/javascript">
function drawPolygon() {
var canvas = document.getElementById('canvasbox');
if (canvas.getContext) {
var objctx = canvas.getContext('2d');
objctx.beginPath();
// polygon [x,y, x,y, x,y.....]; objctx.moveTo(50, 50); //x,y
objctx.lineTo(50, 125);
objctx.lineTo(150, 125);
objctx.closePath();
objctx.stroke();
} else {
alert('You need HTML5 compatible browser to see this demo.');
}
}
</script>
</head>
<body onload="drawPolygon();">
<canvas id="canvasbox"></canvas>
</body>
</html>beginPath() Mỗi khi phương thức này được gọi, danh sách sẽ được đặt lại và chúng ta có thể bắt đầu vẽ các hình mới.
moveTo(x, y) điều này sẽ đặt vị trí khởi động của đường dẫn. Trong ví dụ trên, chúng ta đang vẽ đường đi từ (75,50) điểm.
lineTo(x, y) sẽ vẽ đường thẳng trong đó x và y sẽ là điểm cuối. Phương thức này có hai đối số – x và y, – là tọa độ của điểm cuối và điểm bắt đầu của đường phụ thuộc vào điểm cuối của đường dẫn được vẽ trước đó hoặc tọa độ di chuyển tới(x,y). Ví dụ objctx.lineTo(175, 50) sẽ vẽ đường thẳng từ điểm đầu (75,50) đến điểm cuối (175,50).
closePath() sẽ đóng hình bằng cách vẽ một đường thẳng từ điểm hiện tại đến điểm bắt đầu. Nếu hình đã được đóng hoặc chỉ có một điểm trong danh sách, chức năng này sẽ không làm gì.
fillStyle sẽ đặt thuộc tính nền nhưng sẽ không lấp đầy.
fill() sẽ tô hình dạng theo fillStyle. Nếu không có kiểu tô màu thì nó sẽ tô màu đen.
// Draw the barcodes area. scanner.onFrameRead = results => { // Reset the width and height and empty the canvas canvas.width = video.videoWidth; canvas.height = video.videoHeight; let ctx = canvas.getContext('2d'); // Set color ctx.fillStyle = 'rgba(254,180,32,0.3)'; for(var result of results){ // Get localization // polygon [x,y, x,y, x,y.....]; let x1 = result.LocalizationResult.X1; let x2 = result.LocalizationResult.X2; let x3 = result.LocalizationResult.X3; let x4 = result.LocalizationResult.X4; let y1 = result.LocalizationResult.Y1; let y2 = result.LocalizationResult.Y2; let y3 = result.LocalizationResult.Y3; let y4 = result.LocalizationResult.Y4; // Draw ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineTo(x3, y3); ctx.lineTo(x4, y4); ctx.fill(); } };
DEMO nhanh2023<!DOCTYPE html> <html> <body> <canvas id="canvas" width="1116" height="837" style="border:3px solid #000;"> Your browser does not support the HTML canvas tag.</canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // polygon [x,y, x,y, x,y.....]; var poly = [0, 294.69374999999997, 0, 294, 256, 0, 256.33124999999995, 0] ; // copy array var shape = poly.slice(0); ctx.fillStyle = '#f00' ctx.beginPath(); ctx.moveTo(shape.shift(), shape.shift()); while(shape.length) { ctx.lineTo(shape.shift(), shape.shift()); } ctx.closePath(); ctx.fill(); ctx.stroke(); </script> </body> </html>
Với việc đã biết được cách dùng các thẻ trong HTML, việc tạo ra một trang văn bản giống như trong Word có thể được thực hiện. Tuy nhiên, đôi khi do công việc yêu cầu mà trong trang văn bản đó cócác kí tự đặc biệt như đô la $, cent ¢, euro €, yen ¥,.. không thể gõ theo kiểu bình thường trong lập trình HTML được.
