jQuery是一個強大的JavaScript庫，可以通過它輕松地創建各種動態效果和交互功能。在這篇文章中，我們將使用jQuery的animate方法，創建一個畫矩形的動畫效果。

$('document').ready(function(){
// 獲取畫布
var canvas = $('#canvas');
// 獲取畫筆
var ctx = canvas.get(0).getContext('2d');
// 設置矩形的起始位置和大小
var x = 50;
var y = 50;
var width = 50;
var height = 50;
// 畫矩形的函數
function drawRectangle(){
ctx.clearRect(0, 0, canvas.width(), canvas.height()); // 清空畫布
ctx.fillRect(x, y, width, height); // 畫矩形
}
// 使用animate方法畫出矩形的動畫
canvas.click(function(){
$(this).animate({
'width': '500px',
'height': '500px',
'marginLeft': '-250px',
'marginTop': '-250px'
}, {
duration: 2000,
step: function(now, fx){
// 將畫布尺寸設置為當前寬度和高度
$(this).attr('width', now);
$(this).attr('height', now);
// 調整矩形的大小
width = now / 5;
height = now / 5;
// 重繪矩形
drawRectangle();
},
complete: function(){
$(this).animate({
'width': '100px',
'height': '100px',
'marginLeft': '0px',
'marginTop': '0px'
}, {
duration: 1000,
step: function(now, fx){
// 將畫布尺寸設置為當前寬度和高度
$(this).attr('width', now);
$(this).attr('height', now);
// 調整矩形的大小
width = now / 5;
height = now / 5;
// 重繪矩形
drawRectangle();
},
complete: function(){
// 最后一次重繪矩形
width = 50;
height = 50;
drawRectangle();
}
});
}
});
});
});

在上面的代碼中，我們首先獲取畫布和畫筆。然后，我們定義了一個函數drawRectangle，用于繪制矩形。接著，在canvas的click事件中，我們使用animate方法來改變畫布的寬度和高度，以及矩形的大小和位置，實現畫矩形的動畫效果。在step函數中，我們將畫布的尺寸設置為當前寬度和高度，并根據當前寬度和高度調整矩形的大小。在complete函數中，我們使用另一個animate方法將畫布恢復原狀。

通過這樣的方式，我們可以輕松地使用jQuery的animate方法來創建各種動畫效果，而不需要編寫復雜的JavaScript代碼。如果您還沒有使用過jQuery，我建議您學習一下，它可以大大提高您的web開發效率。