HTML5 canvas是一個(gè)強(qiáng)大的繪圖工具，它可以創(chuàng)建各種各樣的動(dòng)態(tài)效果，比如表情包動(dòng)畫。下面是一個(gè)簡(jiǎn)單的表情包動(dòng)畫，讓我們來(lái)一步步了解這段代碼。

// 獲取canvas元素和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 繪制表情
function drawEmoji(x, y, size) {
// 繪制圓形頭部
ctx.fillStyle = '#feca57';
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
// 繪制眼睛
ctx.fillStyle = '#1e272e';
ctx.beginPath();
ctx.arc(x - size / 2, y - size / 5, size / 5, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(x + size / 2, y - size / 5, size / 5, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
// 繪制嘴巴
ctx.beginPath();
ctx.moveTo(x - size / 2, y + size / 5);
ctx.quadraticCurveTo(x, y + size / 3, x + size / 2, y + size / 5);
ctx.stroke();
}
// 實(shí)現(xiàn)動(dòng)畫
var x = 50;
var y = 50;
var size = 30;
var direction = 1;
function animate() {
// 擦除上一幀
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 繪制表情
drawEmoji(x, y, size);
// 更新位置和大小
x += direction * 5;
size += direction * 2;
// 邊界檢測(cè)
if (x + size >canvas.width || x - size< 0) {
direction *= -1;
}
// 循環(huán)調(diào)用動(dòng)畫
requestAnimationFrame(animate);
}
// 啟動(dòng)動(dòng)畫
animate();

首先我們需要獲取canvas元素和上下文，然后定義一個(gè)函數(shù)drawEmoji來(lái)繪制表情。這個(gè)函數(shù)接收三個(gè)參數(shù)：中心點(diǎn)的x坐標(biāo)，y坐標(biāo)以及表情半徑大小。我們通過(guò)ctx.arc和ctx.quadraticCurveTo來(lái)繪制出圓形頭部、眼睛和嘴巴。畫筆顏色和填充顏色可以通過(guò)ctx.fillStyle和ctx.stroke屬性來(lái)設(shè)置。

接下來(lái)我們實(shí)現(xiàn)動(dòng)畫。定義x和y表示表情的位置，size表示表情的大小，direction表示表情的運(yùn)動(dòng)方向。我們?cè)诤瘮?shù)animate中擦除上一幀，然后調(diào)用drawEmoji繪制新的表情。接著我們更新位置和大小，然后進(jìn)行邊界檢測(cè)并改變方向。最后我們利用requestAnimationFrame函數(shù)來(lái)循環(huán)調(diào)用animate函數(shù)實(shí)現(xiàn)動(dòng)畫效果。