canvas繪製卡通人臉形象效果

admin發表於2018-07-19
Canvas

分享一段程式碼，它實現了利用canvas繪製卡通人臉形狀程式碼例項。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width: 400px;
  height: 400px;
  margin: 100px auto;
}
</style>
</head>
<body>
<div>
  <canvas id="demo" width="400" height="400"></canvas>
</div>
<script>
//第一步：獲取canvas元素
var canvasDom = document.getElementById("demo");
//第二步：獲取上下文
var cet = canvasDom.getContext('2d');
//第三步：開始繪製
/* 中心軸 130 */
/* 面部 頭髮*/
cet.beginPath();
cet.moveTo(70, 90);
cet.quadraticCurveTo(130, 30, 187, 90);
cet.quadraticCurveTo(160, 85, 143, 88);
cet.quadraticCurveTo(132, 89, 130, 95);
cet.quadraticCurveTo(132, 89, 117, 88);
cet.quadraticCurveTo(100, 85, 70, 90);
cet.fillStyle = "#3e0d09";
cet.fill();
cet.stroke();
 
 
/* 輪廓*/
cet.beginPath();
cet.moveTo(70, 90);
cet.quadraticCurveTo(65, 99, 65, 106);
cet.quadraticCurveTo(70, 144, 68, 186);
cet.quadraticCurveTo(75, 210, 130, 213);
cet.quadraticCurveTo(185, 210, 191, 186);
cet.quadraticCurveTo(190, 144, 192, 106);
cet.quadraticCurveTo(194, 98, 187, 90);
cet.quadraticCurveTo(160, 85, 143, 88);
cet.quadraticCurveTo(132, 89, 130, 95);
cet.quadraticCurveTo(132, 89, 117, 88);
cet.quadraticCurveTo(100, 85, 70, 90);
cet.fillStyle = "#fde9ea";
cet.fill();
cet.stroke();
 
 
/* 左面眉毛 */
cet.beginPath();
cet.moveTo(90, 130);
cet.quadraticCurveTo(96, 113, 115, 130);
cet.quadraticCurveTo(117, 131, 113, 133);
cet.quadraticCurveTo(96, 120, 90, 130);
cet.fillStyle = "#614248";
cet.fill();
cet.stroke();
 
/* 右面眉毛 */
cet.beginPath();
cet.moveTo(170, 130);
cet.quadraticCurveTo(165, 113, 145, 130);
cet.quadraticCurveTo(143, 131, 147, 133);
cet.quadraticCurveTo(164, 120, 170, 130);
cet.fillStyle = "#614248";
cet.fill();
cet.stroke();
 
/* 左面眼睛 */
cet.beginPath();
cet.lineWidth = 3;
cet.strokeStyle = "#431b24";
cet.moveTo(88, 148);
cet.lineTo(115, 150);
cet.moveTo(107, 150);
cet.quadraticCurveTo(104, 157, 101, 150);
cet.fillStyle = "#431b24";
cet.fill();
cet.stroke();
 
/* 右面眼睛 */
cet.beginPath();
cet.lineWidth = 3;
cet.strokeStyle = "#431b24";
cet.moveTo(172, 148);
cet.lineTo(145, 150);
cet.moveTo(153, 150);
cet.quadraticCurveTo(156, 157, 159, 150);
cet.fillStyle = "#431b24";
cet.fill();
cet.stroke();
 
/* 鼻子 */
cet.beginPath();
cet.lineWidth = 1;
cet.moveTo(120, 163);
cet.quadraticCurveTo(120, 165, 122, 170);
cet.quadraticCurveTo(130, 172, 138, 170);
cet.quadraticCurveTo(140, 165, 140, 163);
cet.stroke();
 
/* 嘴 */
cet.beginPath();
cet.moveTo(111, 180)
cet.quadraticCurveTo(130, 197, 149, 180);
cet.stroke();
 
/* 左耳朵*/
cet.beginPath();
cet.moveTo(69, 148);
cet.quadraticCurveTo(53, 140, 58, 166);
cet.quadraticCurveTo(59, 170, 58, 175);
cet.quadraticCurveTo(57, 183, 68, 184);
cet.moveTo(68, 165);
cet.quadraticCurveTo(65, 158, 60, 160);
cet.moveTo(68, 175);
cet.quadraticCurveTo(60, 170, 62, 165);
cet.fillStyle = "#fde9ea";
cet.fill();
cet.stroke();
 
/* 右耳朵 */
cet.beginPath();
cet.moveTo(191, 148);
cet.quadraticCurveTo(207, 140, 202, 166);
cet.quadraticCurveTo(201, 170, 202, 175);
cet.quadraticCurveTo(203, 183, 192, 184);
cet.moveTo(192, 165);
cet.quadraticCurveTo(195, 158, 200, 160);
cet.moveTo(192, 175);
cet.quadraticCurveTo(200, 170, 198, 165);
cet.fillStyle = "#fde9ea";
cet.fill();
cet.stroke();
 
/* 身體 */
cet.beginPath();
cet.moveTo(100, 210);
cet.quadraticCurveTo(85, 218, 70, 240);
cet.quadraticCurveTo(73, 270, 115, 276);
cet.quadraticCurveTo(180, 283, 190, 240);
cet.quadraticCurveTo(175, 218, 160, 210);
cet.quadraticCurveTo(130, 218, 100, 210);
cet.fillStyle = "#949dd4";
cet.fill();
cet.stroke();
 
/* 衣服 */
cet.beginPath();
cet.moveTo(80, 260);
cet.quadraticCurveTo(80, 240, 100, 230);
cet.moveTo(106, 235);
cet.quadraticCurveTo(95, 233, 95, 220);
cet.moveTo(100, 230);
cet.quadraticCurveTo(125, 230, 130, 220);
cet.moveTo(120, 217);
cet.quadraticCurveTo(130, 221, 140, 217);
cet.moveTo(125, 215);
cet.lineTo(135, 220);
cet.moveTo(135, 215);
cet.lineTo(125, 220);
cet.stroke();
 
/* 左 臉龐 */
cet.beginPath();
cet.moveTo(80, 170);
cet.quadraticCurveTo(78, 167, 80, 165);
cet.quadraticCurveTo(87, 163, 95, 165);
cet.quadraticCurveTo(98, 167, 95, 170);
cet.quadraticCurveTo(87, 172, 80, 170);
cet.fillStyle = "#e8afb9";
cet.fill();
 
/* 右 臉龐 */
cet.beginPath();
cet.moveTo(180, 170);
cet.quadraticCurveTo(182, 167, 180, 165);
cet.quadraticCurveTo(173, 163, 165, 165);
cet.quadraticCurveTo(162, 167, 165, 170);
cet.quadraticCurveTo(173, 172, 180, 170);
cet.fillStyle = "#e8afb9";
cet.fill();    
</script>
</body>
</html>

相關文章