JavaScript 娘化圖是一種通過 JavaScript 腳本語言，將 HTML5 的 Canvas（畫布）元素娘化（即美化）的技術。具體來說，通過 JavaScript 操作 Canvas 元素的相關屬性、事件、方法等，可以實現豐富多彩、交互性強的圖形效果展現。 娘化圖在實際應用中有著廣泛的需求，例如：數據統計圖、地圖信息展示、游戲場景、用戶界面等等。下面通過舉例來說明娘化圖的應用。

首先，我們可以利用 Canvas 元素及其 API，繪制一些簡單的圖形。下面的代碼實現了一個簡單的繪圖形，并添加了鼠標移入、移出事件，實現了顏色變換的交互效果。

// HTML 代碼
<canvas id="canvas" width="200" height="200"></canvas>
// JavaScript 代碼
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 繪制矩形
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
// 添加鼠標移入、移出事件
canvas.addEventListener('mouseenter', function() {
ctx.fillStyle = 'green';
ctx.fillRect(50, 50, 100, 100);
});
canvas.addEventListener('mouseleave', function() {
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
});

接著，我們可以利用 Canvas 繪圖 API 提供的基本圖形繪制函數，制作一些更加豐富的圖形效果，例如制作氣泡效果。下面的代碼實現了一個氣泡效果的動畫。

// HTML 代碼
<canvas id="canvas" width="400" height="400"></canvas>
// JavaScript 代碼
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 繪制圓形
function drawCircle(x, y, size) {
var gradient = ctx.createRadialGradient(x, y, 0, x, y, size);
gradient.addColorStop(0, 'rgba(255,255,255,1)');
gradient.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fill();
}
// 繪制氣泡圖
var circles = [];
for (var i = 0; i< 50; i++) {
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var size = Math.random() * 100 + 50;
circles.push({x: x, y: y, size: size});
}
// 實現動畫效果
var speed = 100;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i< circles.length; i++) {
var circle = circles[i];
circle.size += speed / 1000;
drawCircle(circle.x, circle.y, circle.size);
if (circle.size >500) {
circle.size = 0;
}
}
requestAnimationFrame(animate);
}
animate();

最后，我們可以結合 CSS 樣式，實現一些更加豐富的娘化效果，例如實現一個旋轉的彩虹矩形。下面的代碼實現了旋轉的彩虹矩形效果。

// HTML 代碼
<canvas id="canvas" width="400" height="400"></canvas>
// CSS 代碼
canvas {
display: block;
margin: 0 auto;
border: 2px solid #ccc;
border-radius: 10px;
}
// JavaScript 代碼
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var rectWidth = 200;
var rectHeight = 100;
// 實現旋轉動畫
var angle = 0;
function animate() {
angle += 0.02;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(angle);
for (var i = 0; i< 6; i++) {
var hue = i * 60;
ctx.fillStyle = 'hsl(' + hue + ', 80%, 60%)';
var x = -rectWidth / 2;
var y = -rectHeight / 2 + i * 20;
ctx.fillRect(x, y, rectWidth, rectHeight);
}
ctx.restore();
requestAnimationFrame(animate);
}
animate();

總之，JavaScript 娘化圖技術在 HTML5 應用開發中發揮著重要的作用。通過 Canvas 元素及其 API，結合 CSS 樣式，我們可以實現各種各樣的娘化圖效果，增強 Web 應用的用戶交互性及視覺體驗。