Tạo mẫu (pattern) với HTML5 Canvas

Phương thức createPattern

Để tạo một mẫu (pattern) trên HTML5 Canvas, sử dụng phương thức createPattern(image, repetition). Phương thức này sử dụng một hình ảnh để tạo mẫu lặp lại. Tham số thứ hai là chuỗi chỉ định cách lặp, có thể là:

• repeat - lặp cả theo chiều ngang và dọc (mặc định)
• repeat-x - chỉ lặp theo chiều ngang
• repeat-y - chỉ lặp theo chiều dọc
• no-repeat - không lặp

Nếu truyền chuỗi rỗng hoặc null, trình duyệt sẽ mặc định là repeat.

Ví dụ minh họa

Đoạn mã sau minh họa cách tạo mẫu từ hình ảnh và vẽ hình chữ nhật được tô bằng mẫu đó:

<!DOCTYPE HTML>
<html>
<head>
  <style>
    #test {
      width: 100px;
      height: 100px;
      margin: 0px auto;
    }
  </style>
  <script>
    function drawShape() {
      // Lấy phần tử canvas qua DOM
      var canvas = document.getElementById('mycanvas');
      // Kiểm tra hỗ trợ canvas
      if (canvas.getContext) {
        // Lấy ngữ cảnh vẽ 2D
        var ctx = canvas.getContext('2d');
        // Tạo đối tượng Image mới để dùng làm mẫu
        var img = new Image();
        img.src = 'images/pattern.jpg';
        img.onload = function() {
          // Tạo pattern từ ảnh, lặp lại
          var ptrn = ctx.createPattern(img, 'repeat');
          // Đặt fillStyle là pattern vừa tạo
          ctx.fillStyle = ptrn;
          // Vẽ hình chữ nhật tô bằng pattern
          ctx.fillRect(0, 0, 150, 150);
        }
      } else {
        alert('Bạn cần Safari hoặc Firefox 1.5+ để xem demo này.');
      }
    }
  </script>
</head>
<body id="test" onload="drawShape();">
  <canvas id="mycanvas"></canvas>
</body>
</html>