canvas繪製機器貓頭像程式碼例項

螞蟻小編發表於2017-03-16
Canvas

分享一段程式碼例項，它利用canvas繪製機器貓頭像的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<canvas width="1300" height="600" id="myCanvas"></canvas>
<script> 
var a = document.getElementById('myCanvas');
var cxt = a.getContext('2d');
 
cxt.fillStyle = "#22c1f1"; //大圓
cxt.beginPath();
cxt.scale(1.4, 1.2);
cxt.arc(500, 110, 100, 0, Math.PI * 2, false);
cxt.fill();
 
cxt.strokeStyle = "#000";
cxt.lineWidth = 1;
cxt.beginPath();
cxt.arc(500, 110, 100, 0, Math.PI * 2, false);
cxt.stroke();
 
cxt.fillStyle = "#fff"; //小圓
cxt.beginPath();
cxt.arc(500, 130, 75, 0, Math.PI * 2, false);
cxt.fill();
 
cxt.strokeStyle = "#000";
cxt.lineWidth = 1;
cxt.beginPath();
cxt.arc(500, 130, 75, 0, Math.PI * 2, false);
cxt.stroke();
 
cxt.strokeStyle = "#000"; //左眼睛
cxt.lineWidth = 2;
cxt.beginPath();
cxt.scale(0.7, 1.1);
cxt.arc(680, 55, 30, 0, Math.PI * 2, false);
cxt.stroke();
 
cxt.fillStyle = "#fff"; //眼睛
cxt.lineWidth = 1;
cxt.beginPath();
cxt.arc(680, 55, 30, 0, Math.PI * 2, false);
cxt.fill();
 
cxt.fillStyle = "#000";
cxt.lineWidth = 1;
cxt.beginPath();
cxt.arc(695, 65, 5, 0, Math.PI * 2, false);
cxt.fill();
 
 
 
 
cxt.strokeStyle = "#000"; //右眼睛
cxt.lineWidth = 2;
cxt.beginPath();
//cxt.scale(0.7,1.1);
cxt.arc(740, 55, 30, 0, Math.PI * 2, false);
cxt.stroke();
 
cxt.fillStyle = "#fff"; //眼睛
cxt.lineWidth = 1;
cxt.beginPath();
cxt.arc(740, 55, 30, 0, Math.PI * 2, false);
cxt.fill();
 
 
cxt.fillStyle = "#000";
cxt.lineWidth = 1;
cxt.beginPath();
cxt.arc(725, 65, 5, 0, Math.PI * 2, false);
cxt.fill();
 
cxt.strokeStyle = "#000"; //鼻子
cxt.lineWidth = 1;
 
cxt.beginPath();
cxt.arc(710, 80, 10, 0, Math.PI * 2, false);
cxt.stroke();
 
cxt.fillStyle = "#ba2727";
cxt.lineWidth = 1;
cxt.beginPath();
cxt.arc(710, 80, 10, 0, Math.PI * 2, false);
cxt.fill();
 
cxt.strokeStyle = "#000";
cxt.lineWidth = 3;
cxt.beginPath();
cxt.moveTo(710, 90); //嘴巴
cxt.lineTo(710, 155);
cxt.stroke();
 
cxt.strokeStyle = "#000";
cxt.lineWidth = 3;
cxt.beginPath();
cxt.scale(0.9, 0.3);
cxt.arc(790, 425, 90, 0, Math.PI, false);
cxt.stroke();
 
cxt.strokeStyle = "#000"; // 鬍鬚
cxt.lineWidth = 3;
cxt.beginPath();
cxt.moveTo(700, 270);
cxt.lineTo(750, 320);
cxt.stroke();
cxt.strokeStyle = "#000"; //鬍鬚
cxt.lineWidth = 3;
cxt.beginPath();
cxt.moveTo(700, 340);
cxt.lineTo(750, 340);
cxt.stroke();
cxt.strokeStyle = "#000"; //鬍鬚
cxt.lineWidth = 3;
cxt.beginPath();
cxt.moveTo(750, 360);
cxt.lineTo(700, 390);
cxt.stroke();
 
 
cxt.strokeStyle = "#000"; //鬍鬚
cxt.lineWidth = 3;
cxt.beginPath();
cxt.moveTo(875, 270);
cxt.lineTo(825, 320);
cxt.stroke();
cxt.strokeStyle = "#000"; //鬍鬚
cxt.lineWidth = 3;
cxt.beginPath();
cxt.moveTo(825, 340);
cxt.lineTo(875, 340);
cxt.stroke();
 
cxt.strokeStyle = "#000"; //鬍鬚
cxt.lineWidth = 3;
cxt.beginPath();
cxt.moveTo(825, 360);
cxt.lineTo(875, 390);
cxt.stroke();
 
 
 
cxt.fillStyle = "#ba2727"; //項鍊
 
cxt.fillRect(670, 570, 250, 65);
cxt.fill();
 
cxt.strokeStyle = "#000"; //項鍊
cxt.lineWidth = 2;
cxt.strokeRect(670, 572, 250, 65);
cxt.stroke();
 
 
cxt.fillStyle = "#f6ea1c"; //鈴鐺  
cxt.strokeStyle = "#000";
cxt.beginPath();
cxt.scale(0.5, 1.0);
cxt.arc(1580, 620, 40, 0, Math.PI * 2, false);
cxt.fill();
cxt.stroke();
 
cxt.fillStyle = "#000"; //鈴鐺  
 
cxt.beginPath();
cxt.scale(1, 1.0);
cxt.arc(1580, 620, 12, 0, Math.PI * 2, false);
cxt.fill();
 
cxt.strokeStyle = "#000";
cxt.lineWidth = 6;
cxt.beginPath();
cxt.moveTo(1580, 660);
cxt.lineTo(1580, 610);
cxt.stroke();
 
cxt.strokeStyle = "#000";
cxt.lineWidth = 3;
cxt.beginPath();
cxt.moveTo(1540, 600);
cxt.lineTo(1612, 600);
cxt.stroke();
 
cxt.strokeStyle = "#000";
cxt.lineWidth = 3;
cxt.beginPath();
cxt.moveTo(1540, 605);
cxt.lineTo(1612, 605);
cxt.stroke();  
</script>
</body>
</html>

相關文章