08 January 2023

Draw and Fill a polygon and triangle in HTML5

By  at  9:23:00 PM   , ,   No comments 
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>
Draw Triangle <Vẽ hình tam 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();

            // 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.

Ví dụ ta có toạ độ của qrcode sau khi quét camera -> Ta cần vẽ đa giác
2023
// 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 nhanh 
2023
<!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>


0 nhận xét:

Post a Comment

 

BACK TO TOP

Xuống cuối trang