Tạo một đồ họa đơn giản sử dụng thư viện jQuery và canvas

html

Dưới đây là phần code Tạo một đồ họa đơn giản sử dụng thư viện jQuery và canvas.

HTML

<div id="canvasContainer">
  <canvas id="myCanvas"></canvas>
</div>

CSS

#canvasContainer {
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

#myCanvas {
  width: 100%;
  height: 100%;
}

jQuery

$(document).ready(function() {
  // Lấy canvas và thiết lập kích thước
  var canvas = $('#myCanvas')[0];
  canvas.width = $('#canvasContainer').width();
  canvas.height = $('#canvasContainer').height();
  
  // Lấy context 2D của canvas
  var context = canvas.getContext('2d');
  
  // Vẽ hình tròn
  context.beginPath();
  context.arc(100, 100, 50, 0, 2 * Math.PI);
  context.fillStyle = '#FF0000';
  context.fill();
  
  // Vẽ hình chữ nhật
  context.fillStyle = '#00FF00';
  context.fillRect(200, 75, 150, 100);
  
  // Vẽ đường thẳng
  context.beginPath();
  context.moveTo(400, 50);
  context.lineTo(400, 200);
  context.strokeStyle = '#0000FF';
  context.stroke();
});

Giải thích:

  • HTML: Tạo một đối tượng canvas và đặt kích thước cho nó trong một div.
  • CSS: Thiết lập kích thước cho divcanvas.
  • JavaScript:
    • Sử dụng jQuery để lấy đối tượng canvas và thiết lập kích thước của nó.
    • Lấy context 2D của canvas bằng phương thức getContext('2d').
    • Sử dụng các phương thức của context để vẽ các hình tròn, hình chữ nhật và đường thẳng.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *