canvas實現的卡通人物形象程式碼例項

admin發表於2017-02-10
Canvas
分享一段程式碼例項，它利用canvas繪製了卡通人物形象。

感興趣的朋友可以做一下參考，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
canvas {
  border: 2px solid #08A573;
  background-size: 100% 250%;
  background-position: center bottom;
}
</style>
</head>
<body>
<canvas id="canvas" width="650" height="510"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d');
ctx.translate(20, 20);
//右手
lineGradient(ctx, 62, 120, 164, 267, '#dcc0b5', '#e3c2bd', '#e0beb2', '#e7c7bc');
ctx.moveTo(205, 237);
ctx.quadraticCurveTo(150, 180, 113, 162);
ctx.quadraticCurveTo(118, 150, 116, 142);
ctx.quadraticCurveTo(125, 129, 111, 129);
ctx.quadraticCurveTo(100, 130, 100, 154);
ctx.quadraticCurveTo(98, 122, 90, 120);
ctx.quadraticCurveTo(78, 120, 84, 155);
ctx.quadraticCurveTo(80, 155, 80, 150);
ctx.quadraticCurveTo(70, 110, 60, 125);
ctx.quadraticCurveTo(60, 130, 65, 160);
ctx.quadraticCurveTo(65, 162, 62, 160);
ctx.quadraticCurveTo(50, 135, 40, 135);
ctx.quadraticCurveTo(30, 140, 52, 170);
ctx.quadraticCurveTo(48, 172, 47, 170);
ctx.quadraticCurveTo(30, 160, 24, 165);
ctx.quadraticCurveTo(20, 175, 45, 182);
ctx.lineTo(49, 188);
ctx.quadraticCurveTo(60, 250, 120, 292);
ctx.quadraticCurveTo(190, 320, 205, 237);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(92, 155);
ctx.quadraticCurveTo(75, 150, 52, 170);
ctx.quadraticCurveTo(60, 165, 74, 169);
ctx.stroke();
lineGradient(ctx, 131, 167, 55, 206, '#7c3023', '#a71c15', '#a71c15', '#8d120d');
ctx.moveTo(125, 160);
ctx.quadraticCurveTo(82, 152, 49, 195);
ctx.quadraticCurveTo(54, 210, 55, 216);
ctx.quadraticCurveTo(90, 180, 137, 175);
ctx.quadraticCurveTo(125, 160, 125, 160);
ctx.fill();
ctx.stroke();
//衣服
ctx.translate(-20, -20);
lineGradient(ctx, 169, 276, 422, 457, '#ddd6c6', '#d4d6c8', '#d4d5c5', '#cad5c4');
ctx.moveTo(203, 258);
ctx.quadraticCurveTo(135, 265, 97, 306);
ctx.quadraticCurveTo(75, 310, 80, 319);
ctx.quadraticCurveTo(244, 397, 336, 528);
ctx.quadraticCurveTo(426, 443, 390, 343);
ctx.fill();
ctx.stroke();
//左手
lineGradient(ctx, 350, 400, 578, 512, '#d9bcb6', '#dfbdb1', '#e1bfb5', '#debeb3');
ctx.moveTo(397, 350);
ctx.bezierCurveTo(335, 360, 320, 500, 382, 472);
ctx.quadraticCurveTo(480, 520, 494, 490);
ctx.quadraticCurveTo(500, 542, 544, 490);
ctx.quadraticCurveTo(585, 545, 572, 498);
ctx.quadraticCurveTo(564, 485, 552, 480);
ctx.quadraticCurveTo(555, 470, 555, 474);
ctx.quadraticCurveTo(595, 495, 598, 480);
ctx.quadraticCurveTo(585, 460, 550, 454);
ctx.quadraticCurveTo(585, 435, 565, 420);
ctx.quadraticCurveTo(555, 432, 535, 440);
ctx.quadraticCurveTo(466, 375, 390, 352);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(530, 505)
ctx.quadraticCurveTo(575, 556, 539, 495);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(530, 505);
ctx.quadraticCurveTo(560, 475, 552, 471);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(535, 440);
ctx.quadraticCurveTo(540, 465, 524, 470);
ctx.stroke();
lineGradient(ctx, 535, 430, 485, 512, '#922c2a', '#b41e1d', '#b41c19', '#b61b16');
ctx.moveTo(501, 513);
ctx.quadraticCurveTo(475, 455, 542, 437);
ctx.quadraticCurveTo(535, 430, 515, 422);
ctx.quadraticCurveTo(435, 455, 477, 522);
ctx.closePath();
ctx.fill();
ctx.stroke();
 
 
//褲子
lineGradient(ctx, -50, 286, 340, 600, '#404c96', '#3d4693', '#39418c', '#3f4694');
ctx.moveTo(-50, 286);
ctx.quadraticCurveTo(15, 300, 55, 335);
ctx.quadraticCurveTo(250, 420, 350, 553);
ctx.quadraticCurveTo(340, 600, 340, 600);
ctx.lineTo(-50, 600);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(40, 370);
ctx.quadraticCurveTo(40, 350, 55, 345);
ctx.quadraticCurveTo(40, 350, 35, 345);
ctx.stroke();
//褲帶
lineGradient(ctx, 65, 330, 328, 540, '#acc3c9', '#acc1c6', '#a8c2c1', '#abbcc4');
ctx.moveTo(80, 319);
ctx.quadraticCurveTo(244, 397, 336, 528);
ctx.lineTo(325, 544);
ctx.quadraticCurveTo(289, 490, 170, 427);
ctx.quadraticCurveTo(141, 405, 55, 344);
ctx.quadraticCurveTo(54, 330, 65, 330);
ctx.quadraticCurveTo(65, 315, 80, 319);
ctx.fill();
ctx.stroke();
//蝴蝶結
lineGradient(ctx, 78, 360, 209, 497, '#a9c0c6', '#a4c0c3', '#aabec7', '#a3bcc0');
ctx.moveTo(78, 360);
ctx.quadraticCurveTo(120, 355, 162, 366);
ctx.quadraticCurveTo(182, 355, 188, 375);
ctx.quadraticCurveTo(225, 365, 214, 400);
ctx.quadraticCurveTo(215, 408, 210, 409);
ctx.quadraticCurveTo(222, 465, 209, 497);
ctx.quadraticCurveTo(120, 485, 141, 465);
ctx.quadraticCurveTo(148, 453, 170, 430);
ctx.quadraticCurveTo(130, 438, 145, 405);
ctx.quadraticCurveTo(115, 435, 81, 436);
ctx.quadraticCurveTo(55, 445, 78, 360);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(145, 405);
ctx.quadraticCurveTo(145, 375, 163, 366);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(170, 430);
ctx.quadraticCurveTo(197, 424, 210, 410);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(188, 375);
ctx.quadraticCurveTo(155, 385, 155, 404);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(191, 424);
ctx.quadraticCurveTo(185, 475, 197, 449);
ctx.stroke();
//臉
lineGradient(ctx, 442, 90, 270, 340, '#dfb9b6', '#e2c0b6', '#e0beb5', '#d4b7a7');
ctx.moveTo(246, 175);
ctx.quadraticCurveTo(225, 206, 204, 228);
ctx.quadraticCurveTo(192, 260, 215, 293);
ctx.quadraticCurveTo(280, 370, 345, 360);
ctx.quadraticCurveTo(402, 355, 472, 246);
ctx.quadraticCurveTo(477, 127, 373, 74);
ctx.quadraticCurveTo(313, 63, 271, 122);
ctx.quadraticCurveTo(259, 149, 246, 175);
 
ctx.fill();
ctx.stroke();
//臉頰
lineGradient(ctx, 403, 250, 322, 360, '#c48484', '#c48081', '#cd8183', '#cf7e7d');
ctx.moveTo(403, 250);
ctx.quadraticCurveTo(372, 286, 346, 291);
ctx.quadraticCurveTo(365, 341, 322, 360);
ctx.quadraticCurveTo(356, 360, 364, 355);
ctx.quadraticCurveTo(430, 320, 403, 250);
ctx.fill();
//眉毛
ctx.fillStyle = '#000';
ctx.beginPath();
ctx.moveTo(413, 233);
ctx.quadraticCurveTo(405, 240, 407, 224);
ctx.quadraticCurveTo(399, 186, 360, 189);
ctx.quadraticCurveTo(420, 180, 413, 233);
ctx.fill();
ctx.beginPath();
ctx.moveTo(286, 139);
ctx.quadraticCurveTo(285, 147, 295, 142);
ctx.quadraticCurveTo(324, 125, 345, 167);
ctx.quadraticCurveTo(332, 112, 286, 139);
ctx.fill();
//鼻子
ctx.beginPath();
ctx.moveTo(311, 232);
ctx.quadraticCurveTo(305, 230, 303, 238);
ctx.stroke();
//嘴巴
var lineGradient2 = ctx.createRadialGradient(272, 295, 15, 282, 270, 90);
lineGradient2.addColorStop(0, '#8e244a');
lineGradient2.addColorStop(1, '#7d2c3f');
ctx.fillStyle = lineGradient2;
ctx.beginPath();
ctx.moveTo(254, 235);
ctx.quadraticCurveTo(228, 225, 220, 240);
ctx.quadraticCurveTo(214, 252, 215, 272);
ctx.quadraticCurveTo(230, 325, 310, 346);
ctx.quadraticCurveTo(355, 345, 335, 302);
ctx.quadraticCurveTo(300, 280, 254, 235);
ctx.fill();
ctx.stroke();
//舌頭
lineGradient(ctx, 245, 292, 233, 352, '#c3557a', '#be4e74', '#c44d75', '#c15177');
ctx.moveTo(248, 301);
ctx.quadraticCurveTo(242, 280, 219, 292);
ctx.quadraticCurveTo(198, 315, 215, 340);
ctx.quadraticCurveTo(250, 365, 280, 335);
ctx.quadraticCurveTo(285, 295, 238, 315);
ctx.quadraticCurveTo(252, 310, 248, 301);
ctx.fill();
ctx.stroke();
 
//眼睛
eyes(ctx, 'rotate');
eyes(ctx, '');
//頭髮
ctx.rotate(-20 * Math.PI / 180);
ctx.transform(1, 0, 0, 1, -88, 80);
ctx.beginPath();
ctx.fillStyle = "#020b08";
ctx.moveTo(240, 166);
ctx.quadraticCurveTo(240, 122, 200, 92);
ctx.quadraticCurveTo(240, 90, 260, 115);
ctx.quadraticCurveTo(254, 75, 202, 42);
ctx.quadraticCurveTo(270, 50, 295, 70);
ctx.quadraticCurveTo(285, 20, 250, 0);
ctx.quadraticCurveTo(285, 0, 320, 0);
ctx.quadraticCurveTo(355, 15, 363, 42);
ctx.quadraticCurveTo(445, -30, 550, 15);
ctx.quadraticCurveTo(485, 10, 454, 68);
ctx.quadraticCurveTo(520, 30, 580, 80);
ctx.quadraticCurveTo(510, 85, 488, 123);
ctx.quadraticCurveTo(535, 200, 488, 287);
ctx.quadraticCurveTo(522, 300, 560, 315);
ctx.quadraticCurveTo(510, 318, 470, 326);
ctx.quadraticCurveTo(514, 340, 570, 361);
ctx.quadraticCurveTo(478, 375, 385, 360);
ctx.quadraticCurveTo(453, 307, 404, 296);
ctx.quadraticCurveTo(382, 300, 355, 326);
ctx.quadraticCurveTo(374, 304, 385, 299);
ctx.quadraticCurveTo(380, 299, 365, 305);
ctx.quadraticCurveTo(393, 284, 406, 275);
ctx.quadraticCurveTo(392, 277, 365, 287);
ctx.quadraticCurveTo(415, 240, 440, 203);
ctx.quadraticCurveTo(404, 228, 350, 245);
ctx.quadraticCurveTo(400, 210, 425, 154);
ctx.quadraticCurveTo(376, 128, 304, 200);
ctx.quadraticCurveTo(330, 140, 384, 95);
ctx.quadraticCurveTo(325, 90, 288, 122);
ctx.quadraticCurveTo(264, 159, 240, 185);
ctx.quadraticCurveTo(247, 170, 240, 166);
ctx.fill();
//右耳
lineGradient(ctx, 241, 155, 211, 224, '#d9bcb8', '#d9b7ad', '#dec1b9', '#dbbcb7');
ctx.moveTo(245, 180);
ctx.bezierCurveTo(265, 120, 190, 155, 202, 234);
ctx.quadraticCurveTo(224, 208, 245, 180);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(234, 182);
ctx.quadraticCurveTo(243, 165, 219, 175);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(236, 178);
ctx.quadraticCurveTo(240, 158, 225, 166);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(236, 190);
ctx.quadraticCurveTo(220, 182, 210, 223);
ctx.stroke();
//左耳
lineGradient(ctx, 408, 279, 371, 365, '#b89899', '#cb7f81', '#c97e85', '#ca7980');
ctx.moveTo(360, 322);
ctx.quadraticCurveTo(390, 295, 402, 297);
ctx.quadraticCurveTo(435, 290, 421, 325);
ctx.quadraticCurveTo(375, 380, 360, 365);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(415, 312);
ctx.quadraticCurveTo(402, 300, 375, 325);
ctx.quadraticCurveTo(412, 315, 370, 353);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(360, 364);
ctx.quadraticCurveTo(370, 374, 393, 356);
ctx.stroke();
 
 
function eyes(ctx, transition) {
  if (transition == 'rotate') {
    ctx.rotate(50 * Math.PI / 180);
    ctx.transform(-1, 0, 0, 1, 700, -310);
  } else {
    ctx.rotate(30 * Math.PI / 180);
    ctx.transform(-1, 0, 0, 1, 705, -195);
  }
  var lineGradient1 = ctx.createLinearGradient(294, 184, 287, 199);
  lineGradient1.addColorStop(0, '#e1c1b6');
  lineGradient1.addColorStop(1, '#e9cbc3');
  ctx.fillStyle = lineGradient1;
  ctx.strokeStyle = '#000';
  ctx.beginPath();
  ctx.moveTo(312, 205);
  ctx.quadraticCurveTo(285, 160, 256, 199);
  ctx.quadraticCurveTo(285, 195, 312, 205);
  ctx.fill();
  var lineGradient1 = ctx.createLinearGradient(290, 201, 285, 216);
  lineGradient1.addColorStop(0, '#f1dad2');
  lineGradient1.addColorStop(1, '#e8d8c9');
  ctx.fillStyle = lineGradient1;
  ctx.beginPath();
  ctx.moveTo(312, 205);
  ctx.quadraticCurveTo(265, 230, 256, 199);
  ctx.quadraticCurveTo(285, 195, 312, 205);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = "#000";
  ctx.arc(300, 204, 3, 0, 2 * Math.PI);
  ctx.fill();
  ctx.beginPath();
  ctx.moveTo(309, 195);
  ctx.quadraticCurveTo(285, 160, 256, 199);
  ctx.quadraticCurveTo(285, 195, 312, 205);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(256, 199);
  ctx.quadraticCurveTo(265, 225, 300, 213);
  ctx.stroke();
}
 
function lineGradient(ctx, x1, y1, x2, y2, color1, color2, color3, color4) {
  var lineGradient11 = ctx.createLinearGradient(x1, y1, x2, y2);
  lineGradient11.addColorStop(0, color1);
  lineGradient11.addColorStop(0.4, color2);
  lineGradient11.addColorStop(0.8, color3);
  lineGradient11.addColorStop(1, color4);
  ctx.fillStyle = lineGradient11;
  ctx.beginPath();
}                        
</script>
</body>
</html>

相關文章