前端绘制皮卡丘代码

以下是一个基于 HTML5 Canvas 的简单皮卡丘绘制代码：

HTML 代码：

<canvas id="pikachu" width="400" height="400"></canvas>

JavaScript 代码：

var canvas = document.getElementById('pikachu');
var ctx = canvas.getContext('2d');

// 绘制皮卡丘的身体
ctx.beginPath();
ctx.fillStyle = '#FCD116';
ctx.arc(200, 200, 150, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

// 绘制皮卡丘的耳朵
ctx.beginPath();
ctx.fillStyle = '#FCD116';
ctx.arc(150, 130, 50, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle = '#FCD116';
ctx.arc(250, 130, 50, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

// 绘制皮卡丘的眼睛
ctx.beginPath();
ctx.fillStyle = '#000000';
ctx.arc(150, 160, 20, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle = '#FFFFFF';
ctx.arc(145, 155, 6, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle = '#000000';
ctx.arc(250, 160, 20, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle = '#FFFFFF';
ctx.arc(245, 155, 6, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

// 绘制皮卡丘的嘴巴
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = '#000000';
ctx.arc(200, 200, 100, Math.PI * 0.15, Math.PI * 0.85, false);
ctx.stroke();

// 绘制皮卡丘的脸颊
ctx.beginPath();
ctx.fillStyle = '#FF0000';
ctx.arc(100, 220, 30, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle = '#FF0000';
ctx.arc(300, 220, 30, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

这段代码会在画布中绘制出一个皮卡丘的形象。你可以根据需要调整绘制参数，比如颜色、坐标和半径等。