用 JavaScript 绘制 Hello Kitty 图像
以下是使用 JavaScript 绘制 Hello Kitty 的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Hello Kitty</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id='helloKittyCanvas' width='300' height='300'></canvas>
<script>
const canvas = document.getElementById('helloKittyCanvas');
const ctx = canvas.getContext('2d');
// 绘制外轮廓
ctx.beginPath();
ctx.fillStyle = '#FFD700';
ctx.arc(150, 150, 120, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
// 绘制脸部
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(150, 150, 100, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
// 绘制眼睛
ctx.beginPath();
ctx.fillStyle = '#000';
ctx.arc(120, 120, 20, 0, Math.PI * 2);
ctx.arc(180, 120, 20, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
// 绘制鼻子
ctx.beginPath();
ctx.fillStyle = '#FFA07A';
ctx.arc(150, 150, 8, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
// 绘制嘴巴
ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.lineWidth = 3;
ctx.arc(150, 180, 40, 0, Math.PI, false);
ctx.stroke();
ctx.closePath();
// 绘制蝴蝶结
ctx.beginPath();
ctx.fillStyle = '#FF69B4';
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(150, 60);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '#FF69B4';
ctx.moveTo(100, 200);
ctx.lineTo(200, 200);
ctx.lineTo(150, 240);
ctx.closePath();
ctx.fill();
// 绘制花纹
ctx.beginPath();
ctx.fillStyle = '#FF69B4';
ctx.arc(100, 150, 15, 0, Math.PI * 2);
ctx.arc(200, 150, 15, 0, Math.PI * 2);
ctx.arc(150, 100, 15, 0, Math.PI * 2);
ctx.arc(150, 200, 15, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
</script>
</body>
</html>
你可以将此代码复制到一个 HTML 文件中并在浏览器中打开，即可看到绘制的 Hello Kitty 图像。
原文地址: https://www.cveoy.top/t/topic/pfVW 著作权归作者所有。请勿转载和采集!