canvas卡通形象笑臉效果

螞蟻小編發表於2017-02-27
Canvas
分享一段程式碼例項，它利用canvas實現了卡通形象的笑臉效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  padding: 0px;
  margin: 0px;
}
canvas {
  background: #fce501;
}
</style>
</head>
 
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
canvas.width = 500;
canvas.height = 400;
var ctx = canvas.getContext("2d");
 
ctx.beginPath();
ctx.fillStyle = '#000000';
ctx.arc(175, 160, 27, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.stroke();
 
ctx.beginPath();
ctx.fillStyle = '#ffffff';
ctx.arc(165, 149, 8, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.stroke();
 
ctx.beginPath();
ctx.fillStyle = '#000000';
ctx.arc(325, 160, 27, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.stroke();
 
ctx.beginPath();
ctx.fillStyle = '#ffffff';
ctx.arc(315, 149, 8, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.stroke();
 
ctx.beginPath();
ctx.fillStyle = '#ed6b49';
ctx.arc(135, 215, 23, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
// ctx.stroke();
 
ctx.beginPath();
ctx.fillStyle = '#ed6b49';
ctx.arc(365, 215, 23, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
 
ctx.beginPath();
ctx.fillStyle = '#000000';
ctx.arc(251, 221, 10, 180 * Math.PI / 180, 360 * Math.PI / 180, true);
ctx.closePath();
ctx.fill();
ctx.stroke();
 
ctx.beginPath();
ctx.strokeStyle = '#000000';
ctx.lineWidth = 6;
ctx.lineCap = 'round';
ctx.moveTo(182, 248);
ctx.quadraticCurveTo(198, 275, 251, 252);
ctx.stroke();
 
ctx.beginPath();
ctx.strokeStyle = '#000000';
ctx.lineWidth = 6;
ctx.lineCap = 'round';
ctx.moveTo(310, 248);
ctx.quadraticCurveTo(297, 275, 251, 252);
ctx.stroke();
</script>
</body>
</html>

相關文章