HTML5技術正在拯救那些可愛的毛絨寵物，而答案就在它的源代碼中！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拯救毛絨寵物</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
context.drawImage(img, 0, 0);
var imageData = context.getImageData(0,0,canvas.width,canvas.height);
for(var i = 0; i < imageData.data.length; i += 4) {
var red = imageData.data[i];
var green = imageData.data[i+1];
var blue = imageData.data[i+2];
var alpha = imageData.data[i+3];
if(red < 100 && green < 100 && blue < 100) {
imageData.data[i] = 255;
imageData.data[i+1] = 255;
imageData.data[i+2] = 255;
imageData.data[i+3] = 0;
}
}
context.putImageData(imageData, 0, 0);
};
img.src = "cat.jpg";
</script>
</body>
</html>這段代碼首先創建了一個canvas元素，然后在JavaScript中獲取了這個元素和它的2D上下文。接著，它載入一張貓咪的圖片，將這張圖片畫到canvas上，并獲取了圖片的像素數據。隨后的循環語句檢查了每個像素，如果像素的R、G、B三個分量都小于100，就將該像素的R、G、B設置為255，A設置為0，這樣黑色區域變成了透明的。最后，使用putImageData()方法將修改后的像素數據重新畫到了canvas上，從而完成了圖片的處理。
使用HTML5的canvas元素處理圖片，不僅可以實現拯救毛絨寵物這種有趣的效果，還有更多更強大的圖形處理和動畫效果可以實現。HTML5的強大可擴展性將有助于推動網頁設計和開發的創新和發展。