canvas繪製夜空小屋效果程式碼例項

admin發表於2017-02-17
Canvas
分享一段程式碼例項，它實現了利用canvas繪製夜空小屋效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function() {
  canvas = document.getElementById('canvas');
  canvas.width = 1000;
  canvas.height = 560;
  context = canvas.getContext('2d');
 
  drawing(context);
  drawing_start_1(context);
  drawing2(context);
 
 
  go();
  draw_moon(context);
  draw_ease(context);
  draw_ease_1(context);
  draw_sleep(context);
 
};
 
function go() {
 
  for (var i = 0; i < 20; i++) {
    var r = Math.random() * 10 + 3;
    var x = Math.random() * 1000;
    var y = Math.random() * 300;
    var a = Math.random() * 360;
    drawing_start_2(context, x, y, r, r / 2.0, a);
 
  }
 
}
 
 
function draw(cxt) {
  cxt.beginPath();
  for (i = 0; i < 20; i++) {
    cxt.moveTo(0, i * 20);
    cxt.lineTo(1000, i * 20);
    cxt.stroke();
  }
}
 
function draw2(cxt) {
  cxt.beginPath();
  for (i = 0; i < 20; i++) {
    cxt.moveTo(i * 20, 0);
    cxt.lineTo(i * 20, 100);
    cxt.stroke();
  }
}
 
function drawing(cxt) { //畫整體背景顏色漸變
  var linearGrad = cxt.createLinearGradient(500, 0, 500, 540);
  linearGrad.addColorStop(0.0, 'black');
  linearGrad.addColorStop(1.0, 'blue');
  cxt.fillStyle = linearGrad;
  cxt.fillRect(0, 0, 1000, 540);
  cxt.fill();
}
//畫的房子
function drawing2(cxt) { //畫的草坪
  cxt.beginPath();
  cxt.moveTo(0, 540);
  cxt.lineTo(1000, 540);
  cxt.lineTo(1000, 560);
  cxt.lineTo(0, 560);
  cxt.closePath();
  cxt.fillStyle = "rgba(34,177,76,1)";
  cxt.fill();
  cxt.stroke();
 
  cxt.beginPath(); //正方形，放在主體
  cxt.moveTo(200, 540);
  cxt.lineTo(360, 540);
  cxt.lineTo(360, 480);
  cxt.lineTo(200, 480);
  cxt.closePath();
  cxt.fillStyle = "purple";
  cxt.fill();
  cxt.stroke();
 
 
  cxt.beginPath(); //三角形
  cxt.moveTo(120, 480);
  cxt.lineTo(280, 420);
  cxt.lineTo(440, 480);
  cxt.closePath();
  cxt.fillStyle = "purple";
  cxt.fill();
  cxt.stroke();
 
  cxt.beginPath(); //畫的煙囪
  cxt.moveTo(320, 435);
  cxt.lineTo(320, 420);
  cxt.lineTo(340, 420);
  cxt.lineTo(340, 442);
  cxt.closePath();
  cxt.fillStyle = "#fff";
  cxt.fill();
  cxt.stroke();
 
  cxt.beginPath(); //畫窗戶
  cxt.moveTo(240, 520);
  cxt.lineTo(260, 520);
  cxt.lineTo(260, 500);
  cxt.lineTo(240, 500);
  cxt.closePath();
  cxt.fillStyle = "pink";
  cxt.fill();
  cxt.stroke();
 
  cxt.beginPath(); //畫窗戶上的線條，形成一個字
  cxt.moveTo(240, 510);
  cxt.lineTo(260, 510);
  cxt.lineTo(250, 500);
  cxt.lineTo(250, 520);
  cxt.closePath();
  cxt.stroke();
 
 
}
 
function drawing_start_1(cxt) { //星星背景
  cxt.beginPath();
  cxt.rect(0, 0, 1000, 550);
  cxt.closePath();
  cxt.stroke();
}
 
function drawing_start_2(cxt, x, y, outerR, innerR, rot) { //畫星星
 
  cxt.beginPath();
  for (var i = 0; i < 5; i++) {
    cxt.lineTo((Math.cos(18 + i * 72 - rot) / 180 * Math.PI) * outerR + x, -Math.sin((18 + i * 72 - rot) / 180 * Math * outerR + y));
 
    cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * innerR + x, -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * innerR + y);
  }
  cxt.fillStyle = "#cf3";
  cxt.fill();
  cxt.closePath();
  cxt.stroke();
}
 
function draw_moon(cxt) { //畫月亮
  cxt.beginPath();
  cxt.arc(200, 200, 100, 0.6 * Math.PI, 1.3 * Math.PI);
  cxt.bezierCurveTo(140, 119, 93, 224, 169, 295);
  cxt.fillStyle = "yellow";
  cxt.fill();
  cxt.stroke();
}
 
function draw_ease(cxt) { //月亮的眼睛。。。
  cxt.beginPath();
  cxt.arc(115, 180, 4, 130, 180);
  cxt.fillStyle = "#000";
  cxt.fill();
  cxt.stroke();
}
 
function draw_ease_1(cxt) { //月亮的眼睛。。。
  cxt.beginPath();
 
  cxt.arc(115, 180, 1.8, 130, 180);
  cxt.fillStyle = "#fff";
  cxt.fill();
  cxt.stroke();
}
 
function draw_sleep(cxt) { //zzz...
  cxt.beginPath();
  cxt.moveTo(40, 80);
  cxt.lineTo(60, 80);
  cxt.lineTo(40, 100);
  cxt.lineTo(60, 100);
  cxt.strokeStyle = "yellow";
  cxt.stroke();
 
  cxt.beginPath();
  cxt.moveTo(63, 108);
  cxt.lineTo(80, 108);
  cxt.lineTo(63, 123);
  cxt.lineTo(80, 123);
  cxt.strokeStyle = "yellow";
  cxt.stroke();
 
  cxt.beginPath();
  cxt.moveTo(86, 130);
  cxt.lineTo(100, 130);
  cxt.lineTo(86, 142);
  cxt.lineTo(100, 142);
  cxt.strokeStyle = "yellow";
  cxt.stroke();
}
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

相關文章