canvas繪製憤怒小鳥形象程式碼例項

antzone發表於2017-03-02
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">
* {
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>
  <canvas id="myCanvas" width="1000" height="700"></canvas>
</body>
<script type="text/javascript">
var ctx = document.getElementById("myCanvas").getContext("2d");
// 頭
ctx.beginPath();
ctx.strokeStyle = "#f61000";
ctx.arc(300, 300, 100, 0, 2 * Math.PI, true);
ctx.fillStyle = "#f61000";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#dbbfaa";
ctx.arc(300, 417, 100, 6 / 5 * Math.PI, 9 / 5 * Math.PI, false);
ctx.arc(300, 301, 100, 1 / 5 * Math.PI, 4 / 5 * Math.PI, false);
ctx.fillStyle = "#dbbfaa";
ctx.fill();
ctx.stroke();
ctx.save();
// 臉上的 黑。
ctx.beginPath();
ctx.strokeStyle = "rgba(127,20,4,0)";
ctx.fillStyle = "rgba(0,0,0,0.4)";
EllipseTwo(ctx, 245, 300, 16, 8);
ctx.fill();
ctx.stroke();
// 2
ctx.beginPath();
ctx.strokeStyle = "rgba(127,20,4,0)";
ctx.fillStyle = "rgba(0,0,0,0.4)";
EllipseTwo(ctx, 355, 300, 16, 8);
ctx.fill();
ctx.stroke();
// 眼睛
ctx.restore();
ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.fillStyle = "#fff";
ctx.arc(293, 285, 18, 1 / 3 * Math.PI, 5 / 3 * Math.PI, false);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.fillStyle = "#fff";
ctx.arc(307, 285, 18, 2 / 3 * Math.PI, 4 / 3 * Math.PI, true);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.lineWidth = 2
ctx.moveTo(300, 270);
ctx.lineTo(300, 300);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.fillStyle = "#000";
ctx.arc(307, 283, 3, 0, 2 * Math.PI, true);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.fillStyle = "#000";
ctx.arc(289, 284, 3, 0, 2 * Math.PI, true);
ctx.fill();
ctx.stroke();
ctx.save();
// 眉毛
ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.fillStyle = "#000";
ctx.lineWidth = 2
ctx.moveTo(268, 258);
ctx.lineTo(263, 268);
ctx.lineTo(300, 275);
ctx.lineTo(330, 270);
ctx.lineTo(328, 260);
ctx.lineTo(300, 268);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.save();
// 嘴
ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.lineWidth = 2;
ctx.moveTo(280, 310)
ctx.lineTo(300, 290)
ctx.lineTo(330, 314)
ctx.closePath();
ctx.moveTo(283, 310)
ctx.lineTo(300, 328)
ctx.lineTo(325, 314)
ctx.closePath();
ctx.fillStyle = "#f8931d";
ctx.fill();
ctx.stroke();
ctx.restore();
//橢圓
function EllipseTwo(context, x, y, a, b) {
  context.save();
  var r = (a > b) ? a : b;
  var ratioX = a / r;
  var ratioY = b / r;
  context.scale(ratioX, ratioY);
  context.beginPath();
  context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false);
  context.closePath();
  context.restore();
  context.stroke();
}
</script>
</html>

相關文章