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ộtdiv
. - CSS: Thiết lập kích thước cho
div
vàcanvas
. - 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.
- Sử dụng jQuery để lấy đối tượng