耿鬼#
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../../css/init.css" />
<meta name="description" content="canvas + js 绘制的神奇宝贝耿鬼 gengar" />
<link rel="icon" href="../../imgs/icon-min.png" />
<title>耿鬼</title>
<style>
body {
overflow: hidden;
background-color: transparent;
}
canvas {
background-color: transparent;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
const store = {
width: 0,
height: 0,
};
/** @type {HTMLCanvasElement} */
const canvas = document.querySelector("#canvas");
function resizeCanvas() {
store.width = window.innerWidth;
store.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
const ctx = canvas.getContext("2d");
function draw() {
const eyeBg = "rgb(159, 48, 58)";
const eyeBg2 = "rgb(223, 67, 74)";
const eyeBg3 = "rgb(247, 174, 171)";
const color = "rgb(0,0,0)";
const bg = "rgb(105, 87, 145)";
const toothBg = "rgb(239, 239, 239)";
// 第一层皮肤
ctx.beginPath();
ctx.moveTo(76, 112);
ctx.quadraticCurveTo(80, 74, 128, 62.5);
ctx.lineTo(264, 53.5);
ctx.lineTo(304, 104.5);
ctx.lineTo(325, 166.5);
ctx.lineTo(312, 284);
ctx.lineTo(304, 305);
ctx.lineTo(215, 363);
ctx.lineTo(165, 362);
ctx.lineTo(74, 299);
ctx.lineTo(67, 284);
ctx.quadraticCurveTo(23.5, 241, 57, 163);
ctx.fillStyle = bg;
ctx.fill();
// 轮廓
ctx.beginPath();
ctx.moveTo(76, 112);
ctx.quadraticCurveTo(47.5, 45.5, 38, 4);
ctx.quadraticCurveTo(92, 35.5, 128, 62.5);
ctx.moveTo(122.0, 70);
ctx.quadraticCurveTo(134, 50.5, 138.5, 25.5);
ctx.lineTo(147.5, 49.5);
ctx.quadraticCurveTo(164.5, 31, 167, 22);
ctx.quadraticCurveTo(167.5, 69, 198, 12);
ctx.quadraticCurveTo(197.5, 52.5, 213, 37);
ctx.lineTo(232.5, 18);
ctx.lineTo(232.5, 49);
ctx.lineTo(257, 34.5);
ctx.lineTo(255.5, 51.5);
ctx.lineTo(266.5, 43);
ctx.lineTo(264, 53.5);
ctx.moveTo(258.5, 57);
ctx.quadraticCurveTo(320, 13, 337.5, 8.5);
ctx.lineTo(304, 104.5);
ctx.quadraticCurveTo(324, 145, 325, 166.5);
ctx.quadraticCurveTo(360.5, 183.5, 370, 241);
ctx.quadraticCurveTo(379.0, 282.5, 352, 325);
ctx.quadraticCurveTo(350.5, 313.5, 349, 308);
ctx.quadraticCurveTo(345.5, 316, 338, 324.5);
ctx.quadraticCurveTo(337.5, 318, 333, 308);
ctx.lineTo(321.5, 319.5);
ctx.quadraticCurveTo(323, 307, 312, 284);
ctx.moveTo(324, 234);
ctx.quadraticCurveTo(324, 281, 288, 329);
ctx.moveTo(304, 302);
ctx.quadraticCurveTo(314.5, 341, 297, 391.5);
ctx.lineTo(306, 398);
ctx.lineTo(293, 396.5);
ctx.lineTo(297, 406);
ctx.lineTo(278, 401);
ctx.lineTo(281.5, 409);
ctx.quadraticCurveTo(259, 409, 219, 397.5);
ctx.quadraticCurveTo(219.5, 380, 215, 363);
ctx.moveTo(242, 359);
ctx.quadraticCurveTo(174.5, 373, 145, 355);
ctx.moveTo(165, 362);
ctx.quadraticCurveTo(158.5, 387.5, 160, 398.5);
ctx.quadraticCurveTo(144.5, 406, 100.5, 406);
ctx.lineTo(104.5, 401);
ctx.lineTo(84, 404);
ctx.lineTo(90.5, 398);
ctx.lineTo(72.5, 399);
ctx.quadraticCurveTo(52.5, 336, 74, 298);
ctx.moveTo(100, 331);
ctx.quadraticCurveTo(52.5, 293, 53.5, 222);
ctx.moveTo(67, 284);
ctx.quadraticCurveTo(48.5, 308.5, 48, 324);
ctx.quadraticCurveTo(41, 314.5, 38, 308);
ctx.lineTo(29.5, 320);
ctx.quadraticCurveTo(25.5, 311.5, 24, 299);
ctx.lineTo(14, 317.5);
ctx.quadraticCurveTo(-20, 224.5, 57, 163);
ctx.moveTo(52, 184);
ctx.quadraticCurveTo(58.5, 133, 84, 102);
ctx.fillStyle = bg;
ctx.fill();
ctx.strokeStyle = color;
ctx.stroke();
// 左眼
ctx.beginPath();
ctx.moveTo(106, 120.5);
ctx.lineTo(166, 170);
ctx.quadraticCurveTo(149, 192.5, 130, 187);
ctx.quadraticCurveTo(89.5, 179.5, 111, 123);
ctx.fillStyle = eyeBg;
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(163, 173);
ctx.quadraticCurveTo(137.5, 152, 123, 146);
ctx.quadraticCurveTo(102, 155.5, 129, 186);
ctx.quadraticCurveTo(149, 190, 163, 173);
ctx.fillStyle = eyeBg2;
ctx.fill();
ctx.beginPath();
ctx.moveTo(121, 153);
ctx.quadraticCurveTo(128, 160.5, 119, 158);
ctx.quadraticCurveTo(109.5, 151.5, 117, 151);
ctx.lineTo(121, 153);
ctx.fillStyle = eyeBg3;
ctx.fill();
ctx.beginPath();
ctx.moveTo(142, 151);
ctx.quadraticCurveTo(138, 152, 140, 168);
ctx.quadraticCurveTo(144.5, 173, 146, 166);
ctx.quadraticCurveTo(147, 157.5, 146, 154);
ctx.fillStyle = color;
ctx.fill();
ctx.beginPath();
ctx.moveTo(142.5, 154);
ctx.ellipse(142.5, 154, 1.5, 2.5, Math.PI / 10, 0, 2 * Math.PI);
ctx.fillStyle = toothBg;
ctx.fill();
// 右眼
ctx.beginPath();
ctx.moveTo(270.5, 124);
ctx.quadraticCurveTo(290.5, 149, 271, 177.5);
ctx.quadraticCurveTo(242.5, 204.5, 217, 171);
ctx.lineTo(270.5, 124);
ctx.fillStyle = eyeBg;
ctx.fill();
ctx.lineTo(275, 120.5);
ctx.moveTo(217, 171);
ctx.lineTo(215, 171.5);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(219, 173);
ctx.quadraticCurveTo(242, 153, 264, 147);
ctx.quadraticCurveTo(273.5, 167.5, 250, 187);
ctx.quadraticCurveTo(233.5, 189.5, 219, 173);
ctx.fillStyle = eyeBg2;
ctx.fill();
ctx.beginPath();
ctx.moveTo(261, 158);
ctx.ellipse(261, 158, 2.5, 6, Math.PI / 3, 0, 2 * Math.PI);
ctx.fillStyle = eyeBg3;
ctx.fill();
ctx.beginPath();
ctx.moveTo(239, 161);
ctx.ellipse(239, 161, 3.5, 10, 0, 0, 2 * Math.PI);
ctx.fillStyle = color;
ctx.fill();
ctx.beginPath();
ctx.moveTo(239, 155.5);
ctx.ellipse(239, 155.5, 1.5, 2.5, 0, 0, 2 * Math.PI);
ctx.fillStyle = toothBg;
ctx.fill();
// 牙齿
ctx.beginPath();
ctx.moveTo(110, 193);
ctx.quadraticCurveTo(185.5, 246, 273.5, 190);
ctx.quadraticCurveTo(267.5, 253, 201, 261);
ctx.quadraticCurveTo(121.5, 263, 110, 193);
ctx.fillStyle = toothBg;
ctx.fill();
ctx.moveTo(110, 193);
ctx.lineTo(104, 188);
ctx.moveTo(273.5, 190);
ctx.lineTo(277, 186.5);
ctx.moveTo(134.5, 206.5);
ctx.lineTo(134.5, 240.5);
ctx.moveTo(162.5, 216.5);
ctx.lineTo(162.5, 256.5);
ctx.moveTo(192, 218);
ctx.lineTo(192, 261);
ctx.moveTo(221.5, 212);
ctx.lineTo(221.5, 256);
ctx.moveTo(248.5, 204.5);
ctx.lineTo(248.5, 243.5);
ctx.strokeStyle = color;
ctx.stroke();
}
draw();
</script>
</html>目录