canvas繪製風車效果

antzone發表於2018-06-22

分享一段程式碼例項，實現了用canvas繪製風車的效果。

風車是動態的，並且也帶有動態的雲朵背景。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  padding: 0;
  margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var oCanvas = document.getElementById('canvas');
var context = oCanvas.getContext('2d')
var x = 0;
var m = 0;
var play = setInterval(function() {
  x++
  m++
  if (m > 500) {
    m = -400
  }
  //                        漸變背景
  context.save();
  var grd = context.createLinearGradient(0, 500, 0, 0);
  grd.addColorStop(0, '#2d2dff');
  grd.addColorStop(0.4, '#8b8bff')
  grd.addColorStop(1, '#ddd');
  context.fillStyle = '#8eb1f3';
  context.fillRect(0, 0, 500, 500)
  context.restore()
    //雲
  context.beginPath();
  context.fillStyle = '#afcaf5';
  context.arc(70 + m, 310, 50, 0, 2 * Math.PI, true);
  context.arc(130 + m, 260, 60, 0, 2 * Math.PI, true);
  context.arc(130 + m, 280, 60, 0, 2 * Math.PI, true);
  context.arc(140 + m, 310, 60, 0, 2 * Math.PI, true);
  context.arc(10 + m, 330, 30, 0, 2 * Math.PI, true);
  context.arc(180 + m, 360, 100, 0, 2 * Math.PI, true);
  //                        console.log(70+m)
  context.fill();
  context.closePath();
  //小云
  context.beginPath();
  context.arc(280, 130, 25, 0, Math.PI * 2, true);
  context.arc(240, 135, 25, 0, Math.PI * 2, true);
  context.arc(220, 135, 25, 0, Math.PI * 2, true);
  var grd1 = context.createLinearGradient(280, 90, 280, 130);
  grd1.addColorStop(0, "#acc8f7");
  grd1.addColorStop(1, "#8eb1f3");
  context.fillStyle = grd1;
  context.fill();
  context.closePath();
 
  context.beginPath();
  context.arc(15, 80, 25, 0, Math.PI * 2, true);
  context.arc(50, 90, 25, 0, Math.PI * 2, true);
  var grd1 = context.createLinearGradient(15, 55, 15, 80);
  grd1.addColorStop(0, "#acc8f7");
  grd1.addColorStop(1, "#8eb1f3");
  context.fillStyle = grd1;
  context.fill();
  context.closePath();
 
  context.beginPath();
  context.arc(470, 135, 30, 0, Math.PI * 2, true);
  var grd1 = context.createLinearGradient(530, 100, 530, 140);
  grd1.addColorStop(0, "#acc8f7");
  grd1.addColorStop(1, "#8eb1f3");
  context.fillStyle = grd1;
  context.fill();
  context.closePath();
 
  //                        小山丘1
  context.beginPath();
  context.moveTo(0, 330);
  context.strokeStyle = '#96b7ec';
  context.fillStyle = '#96b7ec';
  context.bezierCurveTo(350, 350, 350, 450, 500, 500)
  context.lineTo(0, 500);
  context.lineTo(0, 350);
  context.fill();
  context.stroke();
  context.closePath();
  //                        大山丘2
  context.beginPath();
  context.moveTo(0, 400);
  context.strokeStyle = '#7da1df';
  context.fillStyle = '#7da1df';
  context.bezierCurveTo(200, 400, 300, 250, 500, 350)
  context.lineTo(500, 500);
  context.lineTo(0, 500);
  context.lineTo(0, 400);
  context.fill();
  context.stroke();
  context.closePath();
  //風車1
  //                        柱子
  context.beginPath();
  context.moveTo(350, 320)
  context.strokeStyle = '#7496d6';
  context.fillStyle = '#7496d6';
  context.lineTo(352, 240);
  context.lineTo(354, 240);
  context.lineTo(356, 320);
  context.fill();
  context.stroke();
  context.closePath();
  //                        翅
  context.save();
  context.translate(353, 240);
  context.rotate(Math.PI / 40 * x);
  for (var i = 0; i < 3; i++) {
    context.beginPath();
    context.fillStyle = "#80a5eb";
    context.moveTo(-5, -0);
    context.lineTo(-2, 50);
    context.lineTo(2, 50);
    context.lineTo(5, 0);
    context.rotate(2 * Math.PI / 3);
    context.fill();
    context.closePath();
  }
  context.restore();
  //圓
  context.beginPath();
  context.fillStyle = "#fff";
  context.arc(353, 240, 5, 0, 2 * Math.PI, true);
  context.fill();
  context.closePath();
 
  //                        風車2
  //                        柱子
  context.beginPath();
  context.moveTo(450, 330)
  context.strokeStyle = '#7496d6';
  context.fillStyle = '#7496d6';
  context.lineTo(452, 270);
  context.lineTo(454, 270);
  context.lineTo(456, 330);
  context.fill();
  context.stroke();
  context.closePath();
  //                        翅
  context.save();
  context.translate(453, 270);
  context.rotate(Math.PI / 30 * x);
  for (var i = 0; i < 3; i++) {
    context.beginPath();
    context.fillStyle = "#80a5eb";
    context.moveTo(-4, -0);
    context.lineTo(-1, 40);
    context.lineTo(1, 40);
    context.lineTo(4, 0);
    context.rotate(2 * Math.PI / 3);
    context.fill();
    context.closePath();
  }
  context.restore();
  //圓
  context.beginPath();
  context.fillStyle = "#fff";
  context.arc(453, 270, 3, 0, 2 * Math.PI, true);
  context.fill();
  context.closePath();
  //                                風車3
  //                        柱子
  context.beginPath();
  context.moveTo(50, 335)
  context.fillStyle = '#7496d6';
  context.lineTo(52, 270);
  context.lineTo(54, 270);
  context.lineTo(55, 335);
  context.fill();
  context.closePath();
  //                        翅
  context.save();
  context.translate(53, 270);
  context.rotate(2 * Math.PI / 40 * x);
  for (var i = 0; i < 3; i++) {
    context.beginPath();
    context.fillStyle = "#80a5eb";
    context.moveTo(-4, -0);
    context.lineTo(-1, 40);
    context.lineTo(1, 40);
    context.lineTo(4, 0);
    context.rotate(2 * Math.PI / 3);
    context.fill();
    context.closePath();
  }
  context.restore();
  //圓
  context.beginPath();
  context.fillStyle = "#fff";
  context.arc(53, 270, 3, 0, 2 * Math.PI, true);
  context.fill();
  context.closePath();
 
  //                        風車4
  //                        柱子
  context.beginPath();
  context.moveTo(150, 350)
  context.strokeStyle = '#7496d6';
  context.fillStyle = '#7496d6';
  context.lineTo(152, 290);
  context.lineTo(154, 290);
  context.lineTo(156, 350);
  context.fill();
  context.stroke();
  context.closePath();
  //                        翅
  context.save();
  context.translate(153, 290);
  context.rotate(Math.PI / 30 * x);
  for (var i = 0; i < 3; i++) {
    context.beginPath();
    context.fillStyle = "#80a5eb";
    context.moveTo(-4, -0);
    context.lineTo(-1, 30);
    context.lineTo(1, 30);
    context.lineTo(4, 0);
    context.rotate(2 * Math.PI / 3);
    context.fill();
    context.closePath();
  }
  context.restore();
  //圓
  context.beginPath();
  context.fillStyle = "#fff";
  context.arc(153, 290, 3, 0, 2 * Math.PI, true);
  context.fill();
  context.closePath();
}, 20)
</script>
</body>
</html>

canvas繪製流星效果
2018-07-17
Canvas
Canvas 繪製風向動畫
2017-12-28
Canvas動畫
canvas繪製卡通人臉形象效果
2018-07-19
Canvas
canvas繪製多個圓圈效果
2018-06-05
Canvas
canvas繪製網格射線效果
2018-07-08
Canvas
canvas繪製經典星空連線效果
2018-03-13
Canvas
canvas繪製太陽系運動效果
2017-06-16
Canvas
canvas繪製北斗七星效果
2017-02-24
Canvas
canvas繪製圓環效果程式碼例項
2017-02-21
Canvas
使用canvas繪製dribble風格水波浪
2019-03-01
Canvas
canvas繪製圓盤走動鐘錶效果
2018-09-09
Canvas
canvas繪製箭頭效果程式碼例項
2018-04-02
Canvas
canvas繪製夜空小屋效果程式碼例項
2017-02-17
Canvas
canvas繪製鐘錶效果程式碼例項
2017-02-13
Canvas
canvas繪製橢圓效果程式碼例項
2017-02-20
Canvas
使用 HTML5 Canvas 繪製的水滴效果
2015-01-12
HTMLCanvas
Flutter繪製-08-龍捲風效果
2021-03-25
Flutter
canvas繪製圓形框效果不填充內部
2018-07-16
Canvas
canvas繪製帶有漸變效果的直線
2018-05-27
Canvas
canvas繪製魚吃豆效果程式碼例項
2017-03-26
Canvas
canvas繪製雪花飄落效果程式碼例項
2017-03-19
Canvas
canvas 繪製矩形
2018-08-10
Canvas
canvas 繪製扇形
2018-08-10
Canvas
canvas 繪製文字
2018-08-10
Canvas
canvas 奇巧淫技（二）繪製箭頭路徑效果
2019-03-03
Canvas
canvas繪製旋轉一定角度的矩形效果
2017-02-17
Canvas
canvas 繪製線條
2020-03-13
Canvas
canvas 繪製圓形
2018-10-22
Canvas
canvas繪製直線
2018-07-02
Canvas
Canvas 繪製雷達圖
2019-05-28
Canvas
canvas繪製動畫的技巧
2021-06-29
Canvas動畫
canvas 繪製立體圓環
2019-02-05
Canvas
canvas 繪製文字詳解
2018-08-10
Canvas
canvas 繪製圓角矩形
2018-11-20
Canvas
canvas 繪製矩形缺角
2018-09-29
Canvas
canvas 繪製雙線技巧
2018-12-18
Canvas
canvas繪製笑臉表情
2018-03-20
Canvas
canvas繪製太陽系
2017-10-27
Canvas

canvas繪製風車效果

相關文章